从数据属性获取颜色代码并设置滑块背景

Question

我正在参考 Flickity 创建一个滑块。

我想在每个 div 和 class "carousel-cell" 上添加一个 "data-bgcolor"，所有 "carousel-cell" 的背景颜色将更新为当前活动幻灯片的颜色（class "is-selected"）。

$(document).ready(function() {
  if ($('#carousel1 .carousel-cell').hasClass('is-selected')) {
    console.log('selected');
    $('#carousel1 .carousel-cell').css("background-color", $(this).data("bgcolor"));
  }
})

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.carousel {
  background: #FAFAFA;
}

.carousel-cell {
  width: 33.333%;
  height: 400px;
  margin-right: 10px;
  background: #333;
}

.carousel-cell-image {
  display: block;
  max-height: 100%;
  margin: 0 auto;
  max-width: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}


/* fade in lazy loaded image */

.carousel-cell-image.flickity-lazyloaded,
.carousel-cell-image.flickity-lazyerror {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carousel1" class="carousel" data-flickity='{ "lazyLoad": true, "wrapAround": true }'>
  <div class="carousel-cell" style="color: #f0f0f0;" data-bgcolor="#f0f0f0">
    <img class="carousel-cell-image" data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/tulip.jpg" />
  </div>
  <div class="carousel-cell" style="color: #cc4141;" data-bgcolor="#cc4141">
    <img class="carousel-cell-image" data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/grapes.jpg" />
  </div>
  <div class="carousel-cell" style="color: #413391;" data-bgcolor="#413391">
    <img class="carousel-cell-image" data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/raspberries.jpg" />
  </div>
  <div class="carousel-cell" style="color: #b0f0f5;" data-bgcolor="#b0f0f5">
    <img class="carousel-cell-image" data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/wolf.jpg" />
  </div>
</div>

但似乎 js 不工作，我无法在滑动滑块时更改背景颜色。谁能给我一些关于这个的提示？非常感谢！

Answer 1

试试这个：-

$(document).ready(function() { 
 var selected = $('#carousel1 .carousel-cell.is-selected');
 // inital active slide background-color
 selected.css('background-color', selected.data('bgcolor'));

 // set the background color on the active slide by clicking on the next/preview button or on dragging a slide
 $('body').on('click', 'button.flickity-button, #carousel1 .carousel-cell', function(){
  $('#carousel1 .carousel-cell').each(function(){
   if ($(this).hasClass('is-selected')) {
    $(this).css('background-color', $(this).data('bgcolor'));
   } else {
    $(this).css('background-color', '');
   } 
  });
 });
});

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.carousel {
  background: #FAFAFA;
}

.carousel-cell {
  width: 33.333%;
  height: 400px;
  margin-right: 10px;
  background: #333;
}

.carousel-cell-image {
  display: block;
  max-height: 100%;
  margin: 0 auto;
  max-width: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}


/* fade in lazy loaded image */
.carousel-cell-image.flickity-lazyloaded,
.carousel-cell-image.flickity-lazyerror {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

<div id="carousel1" class="carousel" data-flickity='{ "lazyLoad": true, "wrapAround": true }'>
  <div class="carousel-cell" style="color: #f0f0f0;" data-bgcolor="#ff0">
    <img class="carousel-cell-image" data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/tulip.jpg" />
  </div>
  <div class="carousel-cell" style="color: #cc4141;" data-bgcolor="#cc4141">
    <img class="carousel-cell-image" data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/grapes.jpg" />
  </div>
  <div class="carousel-cell" style="color: #413391;" data-bgcolor="#413391">
    <img class="carousel-cell-image" data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/raspberries.jpg" />
  </div>
  <div class="carousel-cell" style="color: #b0f0f5;" data-bgcolor="#b0f0f5">
    <img class="carousel-cell-image" data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/wolf.jpg" />
  </div>
</div>

编辑

将活动幻灯片背景颜色设置为所有幻灯片

$(document).ready(function() {  
    // inital active slide background-color
    $('#carousel1 .carousel-cell').css('background-color', $('#carousel1 .carousel-cell.is-selected').data('bgcolor'));

    // set the background color on the active slide by clicking on the next/preview button or on dragging a slide
    $('body').on('click', 'button.flickity-button, #carousel1 .carousel-cell', function(){
        $('#carousel1 .carousel-cell').each(function(){ 
            // set active slide's background color to all slides
            if ($(this).hasClass('is-selected')) {
                $('#carousel1 .carousel-cell').css('background-color', $(this).data('bgcolor'));
            } 
        });
    });
});

Answer 2

也许这可以更简单...

$(document).ready(function() {
  $(".is-selected").css('background-color', $(".is-selected").data('bgcolor'));

  $(".flickity-button").on('click', function () {
    $(".is-selected").css('background-color', $(".is-selected").data('bgcolor'));
  });
});

从数据属性获取颜色代码并设置滑块背景

Getting color code from data attribute and set for slider background

html

css

jquery

custom-data-attribute

flickity

编辑