How to use several image sliders on the same page?

Question

I created a simple image slider and I am trying to make it work regardless of how many are on the same page. I have tried many approaches, but none work correctly unless I call each slider separately:

HTML


    
        <
    
    
        >
    
    
        
            
                Slide One
                
                    Button 1
                
            
        
        
            
                Slide Two
                
                    Button 2
                
            
        
        
            
                Slide Three
                
                    Button 3
                
            
        
    



    
        <
    
    
        >
    
    
        
            
                Slide Four
                
                    Button 4
                
            
        
        
            
                Slide Five
                
                    Button 5
                
            
        
        
            
                Slide Six
                
                    Button 6
                
            
        
    



    
        <
    
    
        >
    
    
        
            
                Slide Seven
                
                    Button 7
                
            
        
        
            
                Slide Eight
                
                    Button 8
                
            
        
        
            
                Slide Nine
                
                    Button 9
                
            
        
        
            
                Slide Ten
                
                    Button 10

CSS

/* Placeholders */
/* ============ */
a.rm-slider-control {
  height: 100%;
  width: 100%;
  display: block;
  transition: all 0.5s; }

.rm-slider, .rm-slider-slide {
  height: 100%;
  width: 100%;
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; }

/* Image Slider Styles */
/* =================== */
html, body {
  padding: 0;
  margin: 0; }

/* Hero */
/* ==== */
.rm-slider {
  overflow: hidden;
  height: 100vh; }
  .rm-slider ul {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0; }

@media only screen and (min-width: 1024px) {
  .rm-slider-copy {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 64px;
    text-align: left;
    bottom: auto; } }
/* Image Slider */
/* ============ */
.rm-slider-slide {
  float: left;
  transition: opacity 0.5s linear;
  z-index: 0;
  opacity: 0;
  position: absolute;
  display: block; }
  .rm-slider-slide .rm-copy-container {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    color: white;
    width: 100%; }
  .rm-slider-slide.active {
    z-index: 1;
    opacity: 1; }

/* Slider Controls */
/* --------------- */
a.rm-slider-control {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(42, 42, 42, 0.1);
  cursor: pointer;
  font-size: 36px;
  height: 100px;
  width: 30px; }
  a.rm-slider-control .rm-slider-icon-container {
    color: white;
    height: 100%;
    width: 100%; }
    a.rm-slider-control .rm-slider-icon-container span {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
  a.rm-slider-control.rm-next {
    right: 0; }
  a.rm-slider-control.rm-prev {
    left: 0; }
  a.rm-slider-control:hover {
    background: rgba(42, 42, 42, 0.4); }
  @media only screen and (min-width: 1280px) {
    a.rm-slider-control {
      height: 100px;
      width: 50px; }
      a.rm-slider-control .rm-slider-icon-container span {
        font-size: 32px; } }

/* Slider Text */
/* ----------- */
.rm-img-slider-title {
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 16px 0;
  line-height: 1; }

.rm-img-slider-call-to-action {
  border: 2px solid white;
  border-radius: 40px;
  color: white;
  margin: 16px auto 0;
  display: table;
  height: 40px;
  position: relative;
  margin: 0 auto; }
  .rm-img-slider-call-to-action span {
    display: table-cell;
    vertical-align: middle;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 32px; }
  .rm-img-slider-call-to-action:hover {
    background: rgba(255, 255, 255, 0.4); }

@media only screen and (min-width: 768px) {
  .rm-img-slider-title {
    font-size: 56px; } }
/* Testing */
.rm-slider {
  overflow: hidden;
  height: 500px;
  width: 33.33333333%;
  float: left; }

/*# sourceMappingURL=style.css.map */

JS

var ramonSlider = function(slider, slides, prev, next, transition) {
    var imgSlider = {
        slider: $(slider).data('name'), 
        sliderId: $('#' + $(slider).data('name')),
        slides: $(slides),
        prev: $(prev),
        next: $(next),
        transition: transition || 3000,
        currentIndex: 0,
        interval: undefined,
        slideCount: function() {
            return this.sliderId.find(slides).length;
        },
        makeFirstSlideActive: function() {
            this.sliderId.find(slides).first().addClass('active');
        },
        moveItems: function() {
            var slideItems = this.sliderId.find(slides);
            var currentSlide = slideItems.eq(this.currentIndex);
            console.log(currentSlide);
            slideItems.removeClass('active');
            currentSlide.addClass('active');
        },
        moveOne: function() {
            console.log(this.slideCount());
            var thisObject = this;
            if (this.currentIndex > this.slideCount() - 1) {
                thisObject.currentIndex = 0;
            }
            this.moveItems();
        },
        autoSlide: function() {
            var thisObject = this;
            this.interval = window.setInterval(function() {
                thisObject.currentIndex++;
                thisObject.moveOne();
            }, thisObject.transition);
        },
        moveToNext: function() {
            var thisObject = this;
            var nextItem = this.sliderId.find(next);
            nextItem.on('click', function(e) {
                e.preventDefault();
                window.clearInterval(thisObject.interval);
                thisObject.currentIndex++;
                thisObject.moveOne();              
            });
        },
        moveToPrev: function() {
            var thisObject = this;
            var prevItem = this.sliderId.find(prev);
            prevItem.on('click', function(e) {
                e.preventDefault();
                window.clearInterval(thisObject.interval);
                thisObject.currentIndex--;
                if (thisObject.currentIndex < 0) {
                    thisObject.currentIndex = thisObject.slideCount() - 1;
                }
                thisObject.moveItems();                
            });
        }   
    }
    var init = function() {
        imgSlider.makeFirstSlideActive();
        imgSlider.moveItems();
        imgSlider.moveOne();
        imgSlider.autoSlide();
        imgSlider.moveToNext();
        imgSlider.moveToPrev();
    }
    return init();
};

This Works (Calling each function with the ID of the slider)

$(document).ready(function() {
    ramonSlider('#rm-slider-1', '.rm-slider-slide', '.rm-prev', '.rm-next');
    ramonSlider('#rm-slider-2', '.rm-slider-slide', '.rm-prev', '.rm-next');
    ramonSlider('#rm-slider-3', '.rm-slider-slide', '.rm-prev', '.rm-next');
});

I want this to work (calling a function once using a class instead of ids)

$(document).ready(function() {
    ramonSlider('.rm-slider', '.rm-slider-slide', '.rm-prev', '.rm-next');
});

Any thoughts?

tao · Accepted Answer

Untested, but should work:

$(document).ready(function() {
  $('.rm-slider').each(function(){
    ramonSlider(this, '.rm-slider-slide', '.rm-prev', '.rm-next');
  });
});

Also, these three lines are actually wrong in your slider plugin:

 ...
 slides: $(slides),
 prev: $(prev),
 next: $(next),
 ...

As it is now, they are selecting all elements with those classes in your document, when you probably only want to select the ones in the current slider. For that you probably want to replace them with

 ...
 slides: $(slides, $(slider)),
 prev: $(prev, $(slider)),
 next: $(next, $(slider)),
 ...

If it works as it is now, it's probably because you don't actually use this.slides, this.prev or this.next. But... if you don't use them, I don't see any point in defining them as properties of your object. Most likely, your slider will be fine if you remove those lines altogether.

How to use several image sliders on the same page?

Answers (2)

Related Questions