Animate custom slideshow opposite direction

50
August 26, 2019, at 5:30 PM

I have a functional down arrow to browse a photo gallery. How would I configure the up arrow to navigate the opposite direction (up)?

I have written JQuery to add vertical scrolling functionality that displays only one photo per view (section) of the page. when you select the down arrow, the next image in the photo gallery pops up. I can't seem to configure the up arrow, unfortunately. Any ideas on how I might be able to do this?

I have already tried configuring with the opposite operators ( - instead of + ) to navigate my href back (see below), but it doesn't work out as intended:

$(document).ready(function() { 
  var currNum = 0; 
 
  $('.down').click(function() { 
    currNum += 1; 
    var nextNum = currNum + 1; 
    var nextLink = '#0' + nextNum.toString(); 
    $(this).attr('href', nextLink); 
 
    $('.up').click(function() { 
      var prevNum = currNum - 1; 
      var prevLink = '#0' + prevNum.toString(); 
      $(this).attr('href', prevLink); 
    }); 
  }); 
}); 
 
$(document).ready(function() { 
  var currNum = 0; 
 
  $('.down').click(function() { 
    currNum += 1; 
    var nextNum = currNum + 1; 
    var nextLink = '#0' + nextNum.toString(); 
    $(this).attr('href', nextLink); 
  }); 
});
<!--Container--> 
<div id="container"> 
 
  <div id="cow"><img src="./img/cow.png" alt="icon!"></div> 
 
  <div id="arrows"> 
    <a id="01" class="up" href="#01"><i class="down_icon"></i></a> 
    <a id="01" class="down" href="#01"><i class="down_icon"></i></a> 
  </div> 
 
  <!--Images--> 
  <div id="01" class="section"><img src="photo01.jpg" alt=""></div> 
  <div id="02" class="section"><img src="photo02.jpg" alt=""></div> 
  <div id="03" class="section"><img src="photo03.jpg" alt=""></div> 
 
</div>

Answer 1
  • By using IDs you're just restricting yourself from using multiple galleries on the same page. Use classes instead.
  • Create a wrapper for your items called .Gallery-slider (will be the transitioning element)
  • Use transform and transition in CSS to animate!
  • Use a c variable as counter, increment / decrement depending on the clicked button
  • and use this tiny code to fix the counter (indexer) loop: c = c<0 ? tot-1 : c%tot; (where tot is the total number of items)
  • Translate Y the slider DIV by -c * 100%

jQuery($ => { // DOM ready and $ alias in scope 
 
  /** 
   * Gallery component 
   */ 
 
  $('.Gallery').each((i, el) => { 
     
    let c = 0; // Start index Counter 
    const $Slider = $(el).find('.Gallery-slider'); 
    const $UpDown = $(el).find('.up, .down'); 
    const tot = $Slider.children().length;     
    const animate = () => { 
      c = c<0 ? tot-1 : c%tot;  
      $Slider.css({transform: `translateY(${-c * 100}%)`}); 
    }; 
     
    $UpDown.on('click', evt => { 
      evt.preventDefault(); 
      c = $(evt.currentTarget).is('.down') ? ++c : --c; 
      animate(); 
    }); 
     
  }); 
   
});
* {box-sizing:border-box; margin:0;} 
 
/** 
 * Gallery component 
 */ 
  
.Gallery { 
  position: relative; 
  overflow: hidden; 
  height: 50vh; 
} 
 
.Gallery-slider { 
  position: relative; 
  height: inherit; 
  transition: 0.4s; 
} 
 
.Gallery-item { 
  height: 100%; 
} 
 
.Gallery-item img { 
  display: block; 
  height: 100%; 
  width: 100%; 
  object-fit: cover; 
} 
 
.Gallery-arrows { 
  position: absolute; 
  top: 0; 
  left: 50%; 
  height: 100%; 
} 
 
.Gallery-arrows a { 
  position: absolute; 
  transform: translateX(-50%); 
  font-size: 3em; 
  color: #fff; 
  cursor: pointer; 
  user-select: none; 
} 
.Gallery-arrows a.down { 
 bottom: 0; 
}
<div class="Gallery"> 
  <div class="Gallery-slider"> 
    <div class="Gallery-item"><img src="//placehold.it/600x400/0bf?text=1" alt="1"></div> 
    <div class="Gallery-item"><img src="//placehold.it/600x400/f0b?text=2" alt="2"></div> 
    <div class="Gallery-item"><img src="//placehold.it/600x400/b0f?text=3" alt="3"></div> 
  </div> 
  <div class="Gallery-arrows"> 
    <a class="up"><i class="down_icon">&uarr;</i></a> 
    <a class="down"><i class="up_icon">&darr;</i></a> 
  </div> 
</div> 
 
<div class="Gallery"> 
  <div class="Gallery-slider"> 
    <div class="Gallery-item"><img src="//placehold.it/600x400/ff0?text=As+many" alt="1"></div> 
    <div class="Gallery-item"><img src="//placehold.it/600x400/00f?text=galleries+as" alt="2"></div> 
    <div class="Gallery-item"><img src="//placehold.it/600x400/f00?text=you+need" alt="3"></div> 
  </div> 
  <div class="Gallery-arrows"> 
    <a class="up"><i class="down_icon">&uarr;</i></a> 
    <a class="down"><i class="up_icon">&darr;</i></a> 
  </div> 
</div> 
 
 
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

READ ALSO
Find and append the related class in Jquery

Find and append the related class in Jquery

My app has a HTML structure like this:

81
Collapse and jump to top of div

Collapse and jump to top of div

When a collapsed div is expanded to show the rest of the content, it pushes the rest of the content on the page downThis is fine

71
How to write if/else with jquery selector?

How to write if/else with jquery selector?

I need to write simple if/else in one line and simpler using jQuery selectorHow can I do it?

65
JS function is undefined in IE while working in all other browsers

JS function is undefined in IE while working in all other browsers

JS function calling is not working in IE 11 while it's working in other browserIn IE console there is error saying function is undefined

68