Question

问题是点击滑块中的图像，随处更改图像。我使用mouseover来运行脚本，但它不起作用。我如何更改单个产品的图像.Div动态创建foreach

每次在创建一个div时递增$i值第二次迭代id="slider-for-2"和class="slider-for-2"等等

HTML

<div class="col-sm-4 col-lg-4 col-md-4">  
        <div id="thumbnail-2" class="thumbnail wow slideInUp" data-wow-duration="0.6s" data-wow-delay=".4s">

            <div id="slider-for-1" class="slider-for-1" data-item="1">

            <div class="image-holder">
                <img src="<?= base_url(); ?>assets/user/images/image1.jpg"
                alt=""
                class="img-fluid">
            </div>
            <div class="image-holder">
                <img src="<?= base_url(); ?>assets/user/images/image2.jpg"
                alt=""
                class="img-fluid">
            </div>
            <div class="image-holder">
                <img src="<?= base_url(); ?>assets/user/images/image2.jpg"
                alt=""
                class="img-fluid">
            </div>
        </div>
        <div class="outer-box">
            <div class="card-images">
                <div id="slider-nav-2" class="slider-nav-2 get-slick-name" data-item="2">
                    <div class="image-holder">
                        <img src="<?= base_url(); ?>assets/user/images/image1.jpg"
                        alt=""
                        class="img-fluid">
                    </div>
                    <div class="image-holder">
                        <img src="<?= base_url(); ?>assets/user/images/image2.jpg"
                        alt=""
                        class="img-fluid">
                    </div>
                    <div class="image-holder">
                        <img src="<?= base_url(); ?>assets/user/images/image2.jpg"
                        alt=""
                        class="img-fluid">
                    </div>
                </div>
            </div>
            <div class="caption">
                <a href="#">
                    <strong>
                    <h6>
                    WOMEN’S ELSA PREMIUM ZIP
                    WATERPROOF
                    </h6>
                    </strong>
                </a>
                <p>
                    $ <span class="price">89.99</span> | <span
                    class="colors">2</span>
                    COLORS
                </p>
            </div>
        </div>
    </div>
 </div>

脚本

$(".get-slick-name").mouseover(function () {

item = $(this).attr('data-item');

var sliderfor = "slider-for"
var slidernav = "slider-nav";

$('.'+sliderforn'-'+item).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.'+slidernavn'-'+item
});
  $('.'+slidernavn'-'+item).slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      asNavFor: '.'+sliderforn'-'+item,
      dots: false,
      arrows: false,
      centerMode: false,
      draggable: true,
      centerPadding: '0',
      focusOnSelect: true
   });
 });

多光滑滑块无法正常工作

0 个答案: