JSFiddle - React, Tailwind, and code Playground

by Koubenec

HTML

<div class="slider">
    <div class="slide">I'd like to be able to click the text or image on this slide to skip to SLIDE 2</div>
    <div class="slide">I'd like to be able to click the text or image on this slide to skip to SLIDE 3 or maybe even SLIDE 4</div>
    <div class="slide">I'd like to be able to click the text or image on this slide to skip to (you get the idea...)</div>
    <div class="slide">4</div>
</div>
<ul class="slider-nav">
    <li><a href="#" >1</a></li>
    <li><a href="#" >2</a></li>
    <li><a href="#" >3</a></li>
    <li><a href="#" >4</a></li>
</ul>
<div class="clear"></div>
<div class="content">
    <div class="wrapper">
        <p>These "1 2 3 4" links aren't necessary for me-that is, instead of using them to skip to various slides, I'd like to simply be able to use hyperlinks within a slide to skip to another slide. Problem is, anytime I try to move any of these numbered links into a slide and make them text instead of just a number, the whole navigation system falls apart.</p>
            </div>
</div>

CSS

.clear { clear:none; }
.wrapper { width:980px; margin:0 auto; }
.slider { margin:20px 0; height:100px; position:relative;  }
.slider .slide { display:none; background:red; position:absolute; height:100px; width:100%; text-align:center; color:#fff; font-size:24pt; }
.header { background:#eee; font-size:18pt; }
.content { }
.footer { background:#eee; text-align:center; }

.slider-nav { margin: 0 auto; width:100px; clear:both; } 
.slider-nav li { float:left; margin:0 5px; }

JavaScript

$('.slider .slide:eq(0)').addClass('active').fadeIn(200);

$('.slider-nav li a').click(function() {    
    var index = $(this).parent().index('li');

    $('.slider .slide.active').removeClass('active').fadeOut(200, function() { 
            $('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200);
        });
    
    return false;
});