Double slideshow with previous/next buttons

Question

I'm fairly new to jQuery, and JS in general. I've got a slideshow with thumbnails that I had working, but then I add in previous/next buttons and it doesn't work at all now. I just need help figuring this out. Been banging my head against the wall for the last two hours. It's a slideshow with images above the thumbnails and content beneath. I just want be able to switch both, images above and content beneath while showing active states on the thumbnails. It works until you use the next/prev buttons.

 $('.filmstrip div span').on('click', function(){
  var guts_id = $(this).attr('data-tab');
  $('.filmstrip div span').removeClass('current').addClass('gs');
  $(this).toggleClass('current gs');
  $('.guts, .hero-image').removeClass('active');
  $('.'+guts_id).addClass('active');
 });

 // var guts_id = $('.filmstrip div span').attr('data-tab');

 var fSlide = $('li:first', 'ul');
 var lSlide = $('li:last', 'ul');

 var fGuts = $('section:first', '.guts-wrapper');
 var lGuts = $('section:last', '.guts-wrapper');

 var fThumb = $('.thumb:first', '.filmstrip');
 var lThumb = $('.thumb:last', '.filmstrip');

 var $nextSlide = $('.hero .active').next('li').length ? $('.hero .active').next('li') : fSlide;
 var $prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : lSlide;

 var $nextGuts = $('.guts-wrapper .active').next('section').length ? $('.guts-wrapper .active').next('section') : fGuts;
 var $prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : lGuts;

 var $nextThumb = $('.filmstrip .alive').next('.thumb').length ? $('.filmstrip .alive').next('.thumb') : fThumb;
 var $prevThumb = $('.filmstrip .alive').prev('.thumb').length ? $('.filmstrip .alive').prev('.thumb') : lThumb;

 // var $nextThumb = $('.filmstrip .thumb .current').next('.thumb').length ? $('.filmstrip .thumb .current').next('.thumb') : fThumb;
 // var $prevThumb = $('.filmstrip .thumb .current').prev('.thumb').length ? $('.filmstrip .thumb .current').prev('.thumb') : lThumb;
 // var $currentThumb = $('.filmstrip .current');

 $('.next').on('click', function(){
  $('.hero .active').removeClass('active');
  $('.guts-wrapper .active').removeClass('active');
  $('.filmstrip .alive').removeClass('alive').find('.thumb > .current').removeClass('current').addClass('gs');
  $nextSlide.addClass('active');
  $nextGuts.addClass('active');
  $nextThumb.addClass('alive').find('span').addClass('current').removeClass('gs');
  $nextSlide = $('.hero .active').next('li').length ? $('.hero .active').next('li') : fSlide;
  $prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : lSlide;
  $nextGuts = $('.guts-wrapper .active').next('section').length ? $('.guts-wrapper .active').next('section') : fGuts;
  $prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : lGuts;
  $nextThumb = $('.filmstrip .alive').next('.thumb').length ? $('.filmstrip .alive').next('.thumb') : fThumb;
  $prevThumb = $('.filmstrip .alive').prev('.thumb').length ? $('.filmstrip .alive').prev('.thumb') : lThumb;

 });

 $('.previous').on('click', function(){
  $('.hero .active').removeClass('active');
  $('.guts-wrapper .active').removeClass('active');
  $('.filmstrip .alive').removeClass('alive').find('.thumb > .current').removeClass('current').addClass('gs');
  $prevSlide.addClass('active');
  $prevGuts.addClass('active');
  $prevThumb.addClass('alive').find('span').addClass('current').removeClass('gs');
  $prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : fSlide;
  $prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : lSlide;
  $prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : fGuts;
  $prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : lGuts;
  $nextThumb = $('.filmstrip .alive').next('.thumb').length ? $('.filmstrip .alive').next('.thumb') : fThumb;
  $prevThumb = $('.filmstrip .alive').prev('.thumb').length ? $('.filmstrip .alive').prev('.thumb') : lThumb;
 });

.container {
  width: 800px;
  position: relative;
}
.hero {
  width: 800px;
  height: 275px;
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.hero-image {
  width: 100%;
  height: 100%;
  background: rebeccapurple;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 2;
}

.hero-image.content1 {
  background: orange;
  height: 275px;
}
.hero-image.content2 {
  background: rebeccapurple;
  height: 275px;
}
.hero-image.content3 {
  background: lightgreen;
  height: 275px;
}
.guts.content1 {
  background: red;
  height: 275px;
}
.guts.content2 {
  background: blue;
  height: 275px;
}
.guts.content3 {
  background: green;
  height: 275px;
}

.hero-image.active {
  opacity: 1;
  z-index: 3;
}

.filmstrip {
  padding: 0;
  height: 10rem;
  background: black;
  position: relative;
  width: 100%;
}
.filmstrip .button {
  *zoom: 1;
  float: left;
  clear: none;
  padding-left: 0;
  padding-right: 0;
  text-align: inherit;
  width: 22.5%;
  margin-left: 0%;
  margin-right: 0%;
  height: 10rem;
  position: relative;
  overflow: hidden;
  color: white;
}
.filmstrip .button:before,
.filmstrip .button:after {
  content: '';
  display: table;
}
.filmstrip .button:after {
  clear: both;
}
.filmstrip .button.arrow {
  *zoom: 1;
  float: left;
  clear: none;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  width: 16.25%;
  margin-left: 0%;
  margin-right: 0%;
  font-size: 5rem;
  line-height: 10rem;
}
.filmstrip .button.arrow:before,
.filmstrip .button.arrow:after {
  content: '';
  display: table;
}
.filmstrip .button.arrow:after {
  clear: both;
}
.filmstrip .button.arrow span {
  position: relative;
  top: initial;
  left: initial;
  width: 100%;
  height: 100%;
  color: #fff;
  line-height: 10rem;
  display: block;
}
.filmstrip .button.arrow span i {
  display: block;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.filmstrip .button.arrow span i:before,
.filmstrip .button.arrow span i:after {
  content: "";
  display: block;
  position: absolute;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background: #fff;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.filmstrip .button.arrow span i:before {
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.filmstrip .button.arrow span i:after {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}
.filmstrip .button.arrow span i.left,
.filmstrip .button.arrow span i.right {
  width: 2rem;
  height: 3rem;
}
.filmstrip .button.arrow span i.left:before,
.filmstrip .button.arrow span i.right:before,
.filmstrip .button.arrow span i.left:after,
.filmstrip .button.arrow span i.right:after {
  width: 3rem;
  height: 2px;
  top: 50%;
}
.filmstrip .button.arrow span i.left {
  right: 1.5rem;
}
.filmstrip .button.arrow span i.left:before,
.filmstrip .button.arrow span i.left:after {
  left: 0;
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  transform-origin: 0 50%;
}
.filmstrip .button.arrow span i.right {
  left: 1.5rem;
}
.filmstrip .button.arrow span i.right:before,
.filmstrip .button.arrow span i.right:after {
  right: 0;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
.filmstrip .button.arrow span:hover i:before {
  -webkit-transform: rotate(-70deg);
  -moz-transform: rotate(-70deg);
  -o-transform: rotate(-70deg);
  -ms-transform: rotate(-70deg);
  transform: rotate(-70deg);
}
.filmstrip .button.arrow span:hover i:after {
  -webkit-transform: rotate(70deg);
  -moz-transform: rotate(70deg);
  -o-transform: rotate(70deg);
  -ms-transform: rotate(70deg);
  transform: rotate(70deg);
}
.filmstrip .button span {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
}
.filmstrip .button span:after {
  content: '';
  background: rgba(255,255,255,0);
  -webkit-transition: 0.25s all ease;
  -moz-transition: 0.25s all ease;
  -o-transition: 0.25s all ease;
  -ms-transition: 0.25s all ease;
  transition: 0.25s all ease;
}
.filmstrip .button span img {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
  overflow-x: hidden;
}
.filmstrip .button span.gs img:last-child {
  display: none;
}
.filmstrip .button.next:hover span:after,
.filmstrip .button.previous:hover span:after {
  background: rgba(255,255,255,0);
}
.filmstrip .button:hover {
  cursor: pointer;
}
.filmstrip .button:hover span:after {
  background: rgba(255,255,255,0.25);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.guts-wrapper {
  position: relative;
  *zoom: 1;
}
.guts-wrapper:before,
.guts-wrapper:after {
  content: '';
  display: table;
}
.guts-wrapper:after {
  clear: both;
}
.guts-wrapper .guts {
  display: none;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
}
.guts-wrapper .guts.active {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -o-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container">
   <ul class="hero cf">
    <li class="hero-image one active content1">
     
    </li>

    <li class="hero-image two content2">
     
    </li>

    <li class="hero-image three content3">
     
    </li>
   </ul>


   <section class="filmstrip">
    <div class="button arrow previous">
     <span>&lt;</span>
    </div>
    <div class="button ">
     <span data-tab="content1"><img src="http://placehold.it/200x75" alt=""></span>
    </div>
    <div class="button ">
     <span data-tab="content2"><img src="http://placehold.it/200x75" alt=""></span>
    </div>
    <div class="button ">
     <span data-tab="content3"><img src="http://placehold.it/200x75" alt=""></span>
    </div>
    <div class="button arrow next">
     <span>&gt;</span>
    </div>
   </section>
   

   <div class="guts-wrapper">
    <section class="guts content1 active">
     SLIDE #1 CONTENT GOES HERE
    </section>
    <section class="guts content2">
     SLIDE #2 CONTENT GOES HERE
    </section>
    <section class="guts content3">
     SLIDE #3 CONTENT GOES HERE
    </section>
   </div>
</div>

I stripped back some of it and simplified the mess I had previously. Here's a fiddle:

JSFiddle

Any help would be greatly appreciated. I know it's something simple, but I have to walk away at this point or else I'm going to go crazy.

EDIT: I was able to get it working. I adjusted the code above, but I'm not sure the best way to tie in the thumbnails to the next/prev events. You see the "current" class is no longer added to the thumbnails when you click the next/prev buttons. I know there should be a simple way to do this, but I haven't been able to figure it out.

I cleaned up the JS a bit to remove all the stuff I was trying. Any thoughts?

EDIT 2: I figured it out. I just was thinking the wrong way. Regardless, I still believe there's a better, more succinct way to write this. I updated the fiddle.

score 0 · Answer 1 · edited May 23 '17 at 12:23

0

There are two issues in your code.

The activeSlide variable does not suit your need because the element which has .active class changes by sliding to the previous or next li. What you are doing is basically finding the element with .active class and point it out through your code forever. In this case, it is better to use $(".active") so that it will search DOM to find the element with active class. For more reading, refer to HERE
You are not updating prevSlide and nextSlide inside of your click events for the buttons. When you move to the next or previous slides, you need to set the new element. You need to update both prevSlide and nextSlide in both click events.

Check out a working example in CODEPEN

edited May 23 '17 at 12:23

Community

1
1

answered Feb 23 '16 at 03:06

zero point

1,290
3
10
15

Thanks for your answer! I see better what's happening now. I'll get back to it to see if I can get the content below to update as well when you click prev/next.That's still another part of the question that I couldn't quite figure out. – cbaone Feb 23 '16 at 14:45
I just edited my post with updated code, but can't seem to figure out how to add the "current" class to the thumbnails with the next/prev buttons. – cbaone Feb 24 '16 at 14:49

score 0 · Answer 2 · answered Feb 24 '16 at 15:27

Like I mentioned in my edit above... I'm positive there's a much better way to do this. I just created a variable for the thumbs and followed the same convention for the pieces of content. @zero point, thanks for getting me on the right track.

    var fSlide = $('li:first', 'ul');
var lSlide = $('li:last', 'ul');

var fGuts = $('section:first', '.guts-wrapper');
var lGuts = $('section:last', '.guts-wrapper');

var fThumb = $('.thumb:first', '.filmstrip');
var lThumb = $('.thumb:last', '.filmstrip');

var $nextSlide = $('.hero .active').next('li').length ? $('.hero .active').next('li') : fSlide;
var $prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : lSlide;

var $nextGuts = $('.guts-wrapper .active').next('section').length ? $('.guts-wrapper .active').next('section') : fGuts;
var $prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : lGuts;

var $nextThumb = $('.filmstrip .alive').next('.thumb').length ? $('.filmstrip .alive').next('.thumb') : fThumb;
var $prevThumb = $('.filmstrip .alive').prev('.thumb').length ? $('.filmstrip .alive').prev('.thumb') : lThumb;

$('.next').on('click', function(){
    $('.hero .active').removeClass('active');
    $('.guts-wrapper .active').removeClass('active');
    $('.filmstrip .alive').removeClass('alive').find('.thumb > .current').removeClass('current').addClass('gs');
    $nextSlide.addClass('active');
    $nextGuts.addClass('active');
    $nextThumb.addClass('alive').find('span').addClass('current').removeClass('gs');
    $nextSlide = $('.hero .active').next('li').length ? $('.hero .active').next('li') : fSlide;
    $prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : lSlide;
    $nextGuts = $('.guts-wrapper .active').next('section').length ? $('.guts-wrapper .active').next('section') : fGuts;
    $prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : lGuts;
    $nextThumb = $('.filmstrip .alive').next('.thumb').length ? $('.filmstrip .alive').next('.thumb') : fThumb;
    $prevThumb = $('.filmstrip .alive').prev('.thumb').length ? $('.filmstrip .alive').prev('.thumb') : lThumb;

});

$('.previous').on('click', function(){
    $('.hero .active').removeClass('active');
    $('.guts-wrapper .active').removeClass('active');
    $('.filmstrip .alive').removeClass('alive').find('.thumb > .current').removeClass('current').addClass('gs');
    $prevSlide.addClass('active');
    $prevGuts.addClass('active');
    $prevThumb.addClass('alive').find('span').addClass('current').removeClass('gs');
    $prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : fSlide;
    $prevSlide = $('.hero .active').prev('li').length ? $('.hero .active').prev('li') : lSlide;
    $prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : fGuts;
    $prevGuts = $('.guts-wrapper .active').prev('section').length ? $('.guts-wrapper .active').prev('section') : lGuts;
    $nextThumb = $('.filmstrip .alive').next('.thumb').length ? $('.filmstrip .alive').next('.thumb') : fThumb;
    $prevThumb = $('.filmstrip .alive').prev('.thumb').length ? $('.filmstrip .alive').prev('.thumb') : lThumb;
});

Double slideshow with previous/next buttons

2 Answers2