Получение цветового кода из атрибута данных и установка фона слайдера - PullRequest
Новая
       99

Получение цветового кода из атрибута данных и установка фона слайдера

0 голосов
/ 17 марта 2020

Я создаю слайдер со ссылкой из Flickity .

Я хотел бы добавить «data-bgcolor» на каждый div с классом «carousel-cell», и цвет фона всех «carousel-cell» будет обновлен до цвета текущего активного слайда (с классом "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 не работает, так как я не могу изменить цвет фона при скольжении ползунка. Может ли кто-нибудь поделиться со мной некоторыми намеками на этот? Большое вам спасибо!

Ответы [ 2 ]

1 голос
/ 17 марта 2020

Попробуйте это: - 

$(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'));
            } 
        });
    });
});
0 голосов
/ 17 марта 2020

Может быть, это может быть проще ... 

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