CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Emily McMullin
Emily McMullin

Reputation: 121

How can I add a button to my first slide that will load my next slide?

Link to my code

I have a slide show using html/css/JS. I want to have a button on the first slide that will trigger the second slide to show. Not sure how to go about it.

html:

<div class="flex__container flex--pikachu flex--active" data-slide="1">
<div class="flex__item flex__item--left">
  <div class="flex__content">
    <p class="text--sub">Pokemon Gen I</p>
    <h1 class="text--big">Pikachu</h1>

    <button> <p><i class="down"></i></p></button>
    <p class="text--normal">Pikachu is an Electric-type Pokémon introduced in Generation I. Pikachu are small, chubby, and incredibly cute mouse-like Pokémon. They are almost completely covered by yellow fur.</p>
  </div>
  <p class="text__background">Pikachu</p>
</div>
<div class="flex__item flex__item--right"></div>
<img class="pokemon__img" src="https://s4.postimg.org/fucnrdeq5/pikachu.png" />
</div>

css:

.down {
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 }
i {
 border: solid black;
 border-width: 0 3px 3px 0;
 display: inline-block;
 padding: 3px;
 }

Upvotes: 2

Views: 117

Answers (1)

Dacre Denny
Dacre Denny

Reputation: 30360

One a approach could be to use the [slide] data attribute on the .flex__container div elements to advance the slideshow by one. You could:

  1. fetch the [slide] data attribute number value of the currently active slide by selecting the element with class .flex--active
  2. increment the [slide] attribute number by one (to cause the slideshow to move ahead by one
  3. check that the [slide] attribute number has not exceeded the total number of slides and if so, reset it back to the starting slide

In code, this can look like:

$('.next').on('click', function(e) {
  e.preventDefault();

  /*
  Extract current slide index and compute next index
  */
  var current = $('.flex--active').data('slide');
  var next = parseInt(current) + 1;

  /*
  Query next slide element from next slide index just computed
  */
  var nextSlide = $('.slider__warpper')
  .find('.flex__container[data-slide=' + next + ']');

  /*
  If the next slide does not exist, set it to the first slide (ie if
  we've gone outside the range of slides, go back to beginning)
  */
  if( nextSlide.length === 0 ) {
    nextSlide = $('.slider__warpper').find('.flex__container[data-slide=1]')    
  };

  /*
  Cause slide nav to be in sync with navigation to next 
  */
  $('.slide-nav').removeClass('active');
  $('.slide-nav', '.slider__navi').eq(next - 1).addClass('active');

  /*
  Use same transition/animation logic as in other navigation handler
  */
  nextSlide.addClass('flex--preStart');
  $('.flex--active').addClass('animate--end');

  setTimeout(function() {

    $('.flex--preStart')
    .removeClass('animate--start flex--preStart')
    .addClass('flex--active');

    $('.animate--end')
    .addClass('animate--start')
    .removeClass('animate--end flex--active');

  }, 800); 
});

Here is a working codepen as well - hope that helps!

Upvotes: 1

Related Questions