Hello, im trying to make a carousel in Jquery but i dont know how to make the bullets clickable so for example when click on the 2nd dot the carousel will slide to the 2nd slide. So if anyone can give me few pointers i would be grateful, but please dont post solutions, i want to struggle for a while lol, thanks. Here is the code JS: $(document).ready(function(){ $('.dropdown-toggle').click(function(){ $('.dropdown-menu').slideToggle(200) }); $('.content-left').hover(function(){ $(this).addClass('active'); }, function(){ $(this).removeClass('active') }); $('.arrow-next').click(function() { var currentSlide = $('.active-slide'); var nextSlide = currentSlide.next(); var currentDot = $('.active-dot'); var nextDot = currentDot.next(); if(nextSlide.length === 0) { nextSlide = $('.slide').first(); nextDot = $('.dot').first(); } currentSlide.fadeOut(600).removeClass('active-slide') nextSlide.fadeIn(600).addClass('active-slide'); currentDot.removeClass('active-dot'); nextDot.addClass('active-dot'); }); $('.arrow-prev').click(function() { var currentSlide = $('.active-slide'); var prevSlide = currentSlide.prev(); var currentDot = $('.active-dot'); var prevDot = currentDot.prev(); if(prevSlide.length === 0) { prevSlide = $('.slide').last(); prevDot = $('.dot').last(); } currentSlide.fadeOut(600).removeClass('active-slide'); prevSlide.fadeIn(600).addClass('active-slide'); currentDot.removeClass('active-dot'); prevDot.addClass('active-dot'); }); }); HTML : <div class="slider"> <div class="slide active-slide" id="slider-content1"> <div class="content-right"> <img src="images/alien.jpg"> </div> <div class ="content-left"> <h1>Alien: Isolation</h1> <h2>An Eternal Terror</h2> <p>Fifteen years after the events of Alien, Ellen Ripley's daughter, Amanda enters a desperate battle for survival, on a mission to unravel the truth behind her mother's disappearance. As Amanda, you will navigate through an increasingly volatile world as you find yourself confronted on all sides by a panicked, desperate population and an unpredictable, ruthless Alien. Underpowered and underprepared, you must scavenge resources, improvise solutions and use your wits, not just to succeed in your mission, but to simply stay alive.</p> </div> </div> <div class="slide" id="slider-content2"> <div class="content-right"> <img src="images/batman.jpeg"> </div> <div class="content-left"> <h1>Batman:Arkham Knight</h1> <h2>Who is the Arkham Knight?</h2> <p>In the explosive finale to the Arkham series, Batman faces the ultimate threat against the city he is sworn to protect. The Scarecrow returns to unite an impressive roster of super villains, including Penguin, Two-Face and Harley Quinn, to destroy The Dark Knight forever</p> </div> </div> <div class="slide" id="slider-content3"> <div class="content-right"> <img src="images/division.jpg"> </div> <div class="content-left"> <h1>Tom Clancy's The Division</h1> <h2>Post-pandemic New York</h2> <p>The Division takes place in New York three weeks after a lethal virus, released on Black Friday, has swept through the city. One by one, basic services have failed. Society has collapsed into chaos. The President invokes Presidential Directive 51, and The Division, a top-secret unit of self-supporting tactical agents, is activated. Leading seemingly ordinary lives, Division agents are trained to operate independently of command in this type of emergency situation. When the lights go out, their mission begins.</p> </div> </div> </div> <div class="slider-nav"> <a href="#" class="arrow-prev"><img src="images/arrow-prev.png"></a> <ul class="slider-dots"> <li class="dot active-dot">•</li> <li class="dot">•</li> <li class="dot">•</li> </ul> <a href="#" class="arrow-next"><img src="images/arrow-next.png"></a> </div> </div>
Assign an id to each li and if that id is clicked, assign an active value to the corresponding slide?
Thank you PoPSiCLe, i made the first 2 bullets clickable just to see if they are working: http://codepen.io/anon/pen/zxoqaG