如何在同一页面上使用多个图像滑块？

Question

我创建了一个简单的图像滑块，我试图让它工作，无论在同一页面上有多少。我尝试了很多方法，但没有一个正常工作，除非我分别调用每个滑块：

HTML

<section id="rm-slider-1" class="rm-slider" data-name="rm-slider-1">
    <a href="#" class="rm-slider-control rm-prev">
        <span class="rm-slider-icon-container"><span><</span></span>
    </a>
    <a href="#" class="rm-slider-control rm-next">
        <span class="rm-slider-icon-container"><span>></span></span>
    </a>
    <ul class="rm-slider-slides">
        <li class="rm-slider-slide slide-1" style="background-image: url(http://www.planwallpaper.com/static/images/beautiful-sunset-images-196063.jpg);">
            <div class="rm-copy-container">
                <h1 class="rm-img-slider-title">Slide One</h1>
                <a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
                    <span>Button 1</span>
                </a>
            </div>
        </li>
        <li class="rm-slider-slide slide-2" style="background-image: url(http://www.planwallpaper.com/static/images/434976-happy-valentines-day-timeline-cover.jpg);">
            <div class="rm-copy-container">
                <h1 class="rm-img-slider-title">Slide Two</h1>
                <a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
                    <span>Button 2</span>
                </a>
            </div>
        </li>
        <li class="rm-slider-slide slide-3" style="background-image: url(http://all4desktop.com/data_images/original/4237670-images.jpg);">
            <div class="rm-copy-container">
                <h1 class="rm-img-slider-title">Slide Three</h1>
                <a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
                    <span>Button 3</span>
                </a>
            </div>
        </li>
    </ul>
</section>

<section id="rm-slider-2" class="rm-slider" data-name="rm-slider-2">
    <a href="#" class="rm-slider-control rm-prev">
        <span class="rm-slider-icon-container"><span><</span></span>
    </a>
    <a href="#" class="rm-slider-control rm-next">
        <span class="rm-slider-icon-container"><span>></span></span>
    </a>
    <ul class="rm-slider-slides">
        <li class="rm-slider-slide slide-4" style="background-image: url(http://www.planwallpaper.com/static/images/download-happy-janmashtami-hd-images_q0dlDbz.jpg);">
            <div class="rm-copy-container">
                <h1 class="rm-img-slider-title">Slide Four</h1>
                <a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
                    <span>Button 4</span>
                </a>
            </div>
        </li>
        <li class="rm-slider-slide slide-5" style="background-image: url(http://www.planwallpaper.com/static/images/happy_diwali__sms_images_.jpg);">
            <div class="rm-copy-container">
                <h1 class="rm-img-slider-title">Slide Five</h1>
                <a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
                    <span>Button 5</span>
                </a>
            </div>
        </li>
        <li class="rm-slider-slide slide-6" style="background-image: url(http://www.planwallpaper.com/static/images/_77246627_fa4891a6-ccf8-4c8f-9e32-f1a80cdcdf4c_0ClWxBM.jpg);">
            <div class="rm-copy-container">
                <h1 class="rm-img-slider-title">Slide Six</h1>
                <a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
                    <span>Button 6</span>
                </a>
            </div>
        </li>
    </ul>
</section>

<section id="rm-slider-3" class="rm-slider" data-name="rm-slider-3">
    <a href="#" class="rm-slider-control rm-prev">
        <span class="rm-slider-icon-container"><span><</span></span>
    </a>
    <a href="#" class="rm-slider-control rm-next">
        <span class="rm-slider-icon-container"><span>></span></span>
    </a>
    <ul class="rm-slider-slides">
        <li class="rm-slider-slide slide-7" style="background-image: url(http://www.planwallpaper.com/static/images/Halloween-Wallpaper-37.jpg);">
            <div class="rm-copy-container">
                <h1 class="rm-img-slider-title">Slide Seven</h1>
                <a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
                    <span>Button 7</span>
                </a>
            </div>
        </li>
        <li class="rm-slider-slide slide-8" style="background-image: url(http://www.planwallpaper.com/static/images/11-sea-beach-sand-wallpaper_w80EYH0.jpg);">
            <div class="rm-copy-container">
                <h1 class="rm-img-slider-title">Slide Eight</h1>
                <a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
                    <span>Button 8</span>
                </a>
            </div>
        </li>
        <li class="rm-slider-slide slide-9" style="background-image: url(http://www.planwallpaper.com/static/images/1080p-wallpapers-new.png);">
            <div class="rm-copy-container">
                <h1 class="rm-img-slider-title">Slide Nine</h1>
                <a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
                    <span>Button 9</span>
                </a>
            </div>
        </li>
        <li class="rm-slider-slide slide-10" style="background-image: url(http://www.planwallpaper.com/static/images/fire_fist_vs_water_fist-wallpaper-1920x1080_gVipT2G.jpg);">
            <div class="rm-copy-container">
                <h1 class="rm-img-slider-title">Slide Ten</h1>
                <a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
                    <span>Button 10</span>
                </a>
            </div>
        </li>
    </ul>
</section>

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（使用滑块的ID调用每个函数）

$(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');
});

我希望这个工作（使用类而不是id调用一次函数）

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

有什么想法吗？

Answer 1

未经测试，但应该有效：

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

此外，这三行在滑块插件中实际上是错误的：

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

现在，当您可能只想选择当前滑块中的那些类时，它们会选择文档中包含这些类的所有元素。为此你可能想用

替换它们

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

如果它现在可以正常工作，可能是因为您实际上并未使用this.slides，this.prev或this.next。但是......如果你不使用它们，我认为将它们定义为对象的属性没有任何意义。最有可能的是，如果完全删除这些行，滑块就会没问题。

Answer 2

您可以尝试在$ .each

中循环播放

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

经过测试和验证