jquery ui双图像滑块单命令

Posted 2023-05-08

技术标签:

【中文标题】jquery ui双图像滑块单命令【英文标题】：Jquery ui double image slider single command 【发布时间】：2018-10-12 16:21:02 【问题描述】：

我正在尝试制作一个由同一个按钮控制的双图像滑块，但是，使用我的代码，我找不到如何选择两个不同的元素或一个元素上的所有实例

html:

    <div class="slider-box">
    <div class="slider" id="slider">
        <div class="slider__item">
            <img src="https://placeimg.com/960/540/animals" >
            <h2 class="slider__item__title">Slide 1 Title</h2>
        </div>
        <div class="slider__item">
            <img src="https://placeimg.com/960/540/arch" >
            <h2 class="slider__item__title">Slide 2 Title</h2>
        </div>
        <div class="slider__item">
            <img src="https://placeimg.com/960/540/nature" >
            <h2 class="slider__item__title">Slide 3 Title</h2>
        </div>
        <div class="slider__item">
            <img src="https://placeimg.com/960/540/people" >
            <h2 class="slider__item__title">Slide 4 Title</h2>
        </div>
        <div class="slider__item">
            <img src="https://placeimg.com/960/540/tech" >
            <h2 class="slider__item__title">Slide 5 Title</h2>
        </div>
    </div>

    <div class="slider" id="slider">
        <div class="slider__item">
            <img src="https://placeimg.com/960/540/animals" >
            <h2 class="slider__item__title">Slide 1 Title</h2>
        </div>
        <div class="slider__item">
            <img src="https://placeimg.com/960/540/arch" >
            <h2 class="slider__item__title">Slide 2 Title</h2>
        </div>
        <div class="slider__item">
            <img src="https://placeimg.com/960/540/nature" >
            <h2 class="slider__item__title">Slide 3 Title</h2>
        </div>
        <div class="slider__item">
            <img src="https://placeimg.com/960/540/people" >
            <h2 class="slider__item__title">Slide 4 Title</h2>
        </div>
        <div class="slider__item">
            <img src="https://placeimg.com/960/540/tech" >
            <h2 class="slider__item__title">Slide 5 Title</h2>
        </div>
    </div>
</div>

    <div class="slider-nav">
        <div class="slider-nav__prev" id="prev"><i class="fa fa-angle-left"></i></div>
        <div class="slider-nav__next" id="next"><i class="fa fa-angle-right"></i></div>
        <div class="slider-nav__dots" id="dots"></div>
    </div>

Js：

(function($) 

'use strict';

var pluginName = 'slider',
    defaults = 
        next: '.slider-nav__next',
        prev: '.slider-nav__prev',
        item: '.slider__item',
        dots: false,
        dotClass: 'slider__dot',
    ;

function slider(element, options) 
    this.$document = $(document);
    this.$window = $(window);
    this.$element = $(element);
    this.options = $.extend(, defaults, options);
    this.init();


slider.prototype.init = function() 
    this.setup();
    this.attachEventHandlers();
    this.update();


slider.prototype.setup = function(argument) 
    this.$slides = this.$element.find(this.options.item);
    this.count = this.$slides.length;
    this.index = 0;

    this.$next = $(this.options.next);
    this.$prev = $(this.options.prev);

    this.$canvas = $(document.createElement('div'));
    this.$canvas.addClass('slider__canvas').appendTo(this.$element);
    this.$slides.appendTo(this.$canvas);

    this.$dots = $(this.options.dots);
    this.$dots.length && this.createDots();
;

slider.prototype.createDots = function() 
    var dots = [];
    for (var i = 0; i < this.count; i += 1) 
        dots[i] = '<span data-index="' + i + '" class="' + this.options.dotClass + '"></span>';
    
    this.$dots.append(dots);


slider.prototype.attachEventHandlers = function() 
    this.$element.on('prev.slider', this.prev.bind(this));
    this.$document.on('click', this.options.prev, (function(e) 
        this.$element.trigger('prev.slider');
    ).bind(this));

    this.$element.on('next.slider', this.next.bind(this));
    this.$document.on('click', this.options.next, (function(e) 
        this.$element.trigger('next.slider');
    ).bind(this));

    this.$element.on('update.slider', this.update.bind(this));
    this.$window.on('resize load', (function(e) 
        this.$element.trigger('update.slider');
    ).bind(this));

    this.$element.on('jump.slider', this.jump.bind(this));
    this.$document.on('click', ('.' + this.options.dotClass), (function(e) 
        var index = parseInt($(e.target).attr('data-index'));
        this.$element.trigger('jump.slider', index);
    ).bind(this));
;

slider.prototype.next = function(e) 
    this.index = (this.index + 1) % this.count;
    this.slide();
;

slider.prototype.prev = function(e) 
    this.index = Math.abs(this.index - 1 + this.count) % this.count;
    this.slide();
;

slider.prototype.jump = function(e, index) 
    this.index = index % this.count;
    this.slide();


slider.prototype.slide = function(index) 
    undefined == index && (index = this.index);
    var position = index * this.width * -1;
    this.$canvas.css(
        'transform': 'translate3d(' + position + 'px, 0, 0)',
    );
    this.updateCssClass();
;

slider.prototype.update = function() 
    this.width = this.$element.width();
    this.$canvas.width(this.width * this.count);
    this.$slides.width(this.width);
    this.slide();
;

slider.prototype.updateCssClass = function() 
    this.$slides
        .removeClass('active')
        .eq(this.index)
        .addClass('active');

    this.$dots
        .find('.' + this.options.dotClass)
        .removeClass('active')
        .eq(this.index)
        .addClass('active');


$.fn[pluginName] = function(options) 
    return this.each(function() 
        !$.data(this, pluginName) && $.data(this, pluginName, new slider(this, options));
    );
;

)(window.jQuery);

$('#slider').slider(
    prev: '#prev',
    next: '#next',
    dots: '#dots',
    autoplay: true,
);

我是一个 javascript 菜鸟，我了解我正在阅读/使用的内容，但不确定什么时候该写。

这是我的小提琴：https://jsfiddle.net/Fromager/zkgfzbcv/

【问题讨论】：

【参考方案1】：

1) id 应该是唯一的，因此请将 id="slider" 替换为 id="slider1" 和 id="slider2"。

2) 将#slider 替换为.slider@

$('.slider').slider(
    prev: '#prev',
    next: '#next',
    dots: '#dots',
    autoplay: true,
);

将slider() 设置为您拥有的两张幻灯片。

(function($) 

'use strict';

var pluginName = 'slider',
    defaults = 
        next: '.slider-nav__next',
        prev: '.slider-nav__prev',
        item: '.slider__item',
        dots: false,
        dotClass: 'slider__dot',
    ;

function slider(element, options) 
    this.$document = $(document);
    this.$window = $(window);
    this.$element = $(element);
    this.options = $.extend(, defaults, options);
    this.init();


slider.prototype.init = function() 
    this.setup();
    this.attachEventHandlers();
    this.update();


slider.prototype.setup = function(argument) 
    this.$slides = this.$element.find(this.options.item);
    this.count = this.$slides.length;
    this.index = 0;

    this.$next = $(this.options.next);
    this.$prev = $(this.options.prev);

    this.$canvas = $(document.createElement('div'));
    this.$canvas.addClass('slider__canvas').appendTo(this.$element);
    this.$slides.appendTo(this.$canvas);

    this.$dots = $(this.options.dots);
    this.$dots.length && this.createDots();
;

let isInit = false; // check if the first slider is initialized

slider.prototype.createDots = function() 
    if(isInit)
      return; // if the first slider is initialized, do nothing.
    
    var dots = [];
    for (var i = 0; i < this.count; i += 1) 
        dots[i] = '<span data-index="' + i + '" class="' + this.options.dotClass + '">';
        
        // $(this.$slides[i]) is the slider__item div
        dots[i] += i + '/' + $(this.$slides[i]).find('img').attr('src') + '</span>';
    
    this.$dots.append(dots);
    isInit = true; // after the first slider is initialized, set to true


slider.prototype.attachEventHandlers = function() 
    this.$element.on('prev.slider', this.prev.bind(this));
    this.$document.on('click', this.options.prev, (function(e) 
        this.$element.trigger('prev.slider');
    ).bind(this));

    this.$element.on('next.slider', this.next.bind(this));
    this.$document.on('click', this.options.next, (function(e) 
        this.$element.trigger('next.slider');
    ).bind(this));

    this.$element.on('update.slider', this.update.bind(this));
    this.$window.on('resize load', (function(e) 
        this.$element.trigger('update.slider');
    ).bind(this));

    this.$element.on('jump.slider', this.jump.bind(this));
    this.$document.on('click', ('.' + this.options.dotClass), (function(e) 
        var index = parseInt($(e.target).attr('data-index'));
        this.$element.trigger('jump.slider', index);
    ).bind(this));
;

slider.prototype.next = function(e) 
    this.index = (this.index + 1) % this.count;
    this.slide();
;

slider.prototype.prev = function(e) 
    this.index = Math.abs(this.index - 1 + this.count) % this.count;
    this.slide();
;

slider.prototype.jump = function(e, index) 
    this.index = index % this.count;
    this.slide();


slider.prototype.slide = function(index) 
    undefined == index && (index = this.index);
    var position = index * this.width * -1;
    this.$canvas.css(
        'transform': 'translate3d(' + position + 'px, 0, 0)',
    );
    this.updateCssClass();
;

slider.prototype.update = function() 
    this.width = this.$element.width();
    this.$canvas.width(this.width * this.count);
    this.$slides.width(this.width);
    this.slide();
;

slider.prototype.updateCssClass = function() 
    this.$slides
        .removeClass('active')
        .eq(this.index)
        .addClass('active');

    this.$dots
        .find('.' + this.options.dotClass)
        .removeClass('active')
        .eq(this.index)
        .addClass('active');


$.fn[pluginName] = function(options) 
    return this.each(function() 
        !$.data(this, pluginName) && $.data(this, pluginName, new slider(this, options));
    );
;

)(window.jQuery);

let isInitialized = false;

$('.slider').slider(
    prev: '#prev',
    next: '#next',
    dots: '#dots',
    autoplay: true,
);

img 
    max-width: 100%;
    height: auto;


.slider-box,
.slider__item 
    position: relative;


.slider-box
  display:flex;


.slider 
  width:40vw;
  display:inline-block;
    overflow: hidden;


.slider__canvas 
    transition: transform 0.5s;


.slider__item 
    float: left;


.slider__item__title 
    opacity: 0;
    position: absolute;
    top: 50px;
    left: 50px;
    /*transition: opacity 0.3s, transform 0.3s;
    transform: translate3d(-50%, -60%, 0);*/


.active .slider__item__title 
    opacity: 1;
    /*transition-delay: 0.5s;
    transform: translate3d(-50%, -50%, 0);*/


.slider-nav 
    color: #fff;
    text-align: center;


.slider-nav__dots 
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;


.slider-nav__prev,
.slider-nav__next,
.slider__dot 
    background:green;
    /*backface-visibility: hidden;
    transition: transform 0.3s, box-shadow 0.3s;*/


.slider-nav__prev,
.slider-nav__next 
    position: absolute;
    top: 50%;
    width: 3rem;
    height: 3rem;
    margin-top: -1.5rem;
    line-height: 3rem;


.slider-nav__prev 
    left: 7%;


.slider-nav__next 
    right: 7%;


.slider__dot 
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin: 0 1rem;

/*
.slider-nav__prev:hover,
.slider-nav__next:hover,
.slider__dot.active,
.slider__dot:hover 
    transform: scale3d(1.5, 1.5, 1);
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider-box">
  <div class="slider" id="slider1">
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/animals" >
      <h2 class="slider__item__title">Slide 1 Title</h2>
    </div>
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/arch" >
      <h2 class="slider__item__title">Slide 2 Title</h2>
    </div>
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/nature" >
      <h2 class="slider__item__title">Slide 3 Title</h2>
    </div>
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/people" >
      <h2 class="slider__item__title">Slide 4 Title</h2>
    </div>
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/tech" >
      <h2 class="slider__item__title">Slide 5 Title</h2>
    </div>
  </div>

  <div class="slider" id="slider2">
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/animals" >
      <h2 class="slider__item__title">Slide 1 Title</h2>
    </div>
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/arch" >
      <h2 class="slider__item__title">Slide 2 Title</h2>
    </div>
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/nature" >
      <h2 class="slider__item__title">Slide 3 Title</h2>
    </div>
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/people" >
      <h2 class="slider__item__title">Slide 4 Title</h2>
    </div>
    <div class="slider__item">
      <img src="https://placeimg.com/960/540/tech" >
      <h2 class="slider__item__title">Slide 5 Title</h2>
    </div>
  </div>
</div>

<div class="slider-nav">
  <div class="slider-nav__prev" id="prev"><i class="fa fa-angle-left"></i></div>
  <div class="slider-nav__next" id="next"><i class="fa fa-angle-right"></i></div>
  <div class="slider-nav__dots" id="dots"></div>
</div>

【讨论】：

是否有可能通过 Id 的分离只获得一系列点而不是加倍？ @FlorianFromager 根据您的评论，我更新了答案并稍微编辑了createDots()。如果我想提取第一张幻灯片的标题或 alt 或 data-title 以将其放在点中，我可以执行

dots[i] = '&lt;span data-index="' + i + '" class="' + this.options.dotClass + '"&gt;' + i + '/' + this.slider__item__title + '&lt;/span&gt;';

或

dots[i] = '&lt;span data-index="' + i + '" class="' + this.options.dotClass + '"&gt;' + i + '/' + this.data(title) + '&lt;/span&gt;';

之类的操作 @FlorianFromager 我在cmets中更新了，同样的方法可以获取属性。好的，那么使用 .find 我可以做很多类似的事情

以上是关于jquery ui双图像滑块单命令的主要内容，如果未能解决你的问题，请参考以下文章

使用jQuery滑块旋转（度）图像

jQuery UI可拖动分屏

带有内部块元素的 JQuery 滑块

单击滑块轨道时获取 Jquery-UI 滑块值？

jquery ui滑块显示值

Jquery ui 1.8.10 范围滑块不适用于 jquery 3.4.1