0

Есть слайдер где хочу реализовать fade effect между картинками. Хочу это сделать через Jquery.

Html:

<div id="Carousel" class="carousel slider carousel-fade">
        <div class="carousel-inner">
            <div class="item active">
                <img src="..."/>
                <div class="carousel-caption">
                    <h3>123</h3>
                </div>
            </div>
            <div class="item">
                <img src="..."/>
                <div class="carousel-caption">
                    <h3>123</h3>
                </div>
            </div>
            <div class="item">
                <img src="..."/>
                <div class="carousel-caption">
                    <h3>123</h3>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#Carousel" data-slide="prev">
            <span><i class="fa fa-angle-left"></i></span>
        </a>
        <a class="right carousel-control" href="#Carousel" data-slide="next">
            <span><i class="fa fa-angle-right"></i></span>
        </a>
</div>

Jquery:

$('.carousel').carousel({
interval: 4000}).on('slide.bs.carousel', function () {
$('.carousel-fade .carousel-inner .active').fadeToggle(600);}).on('slid.bs.carousel', function () {
$('.carousel-fade .carousel-inner .active').fadeIn(600);});

Получается так, что иногда код отрабатывает, а иногда нет;

А если быстро переключаться между слайдами, бывает не упивается зафейдится картинка и в слайдере их становится две (пока не наступит фейд);

Как обойти и реализовать фейд эффект (только js/jquery)?

5
  • Виноват fadeOut(600) а не fadeToggle(600) *опечатался 29 апр 2018 в 21:52
  • по идее fade это просто opacity который применяется в keyframes и всё
    – user33274
    30 апр 2018 в 5:59
  • @keyframes это ж работа с css, а я хочу реализовать через jquery 30 апр 2018 в 7:15
  • ну так jquery на прямую сотрудничает с css , сначала любой слайдер пишут на css а потом уже вешают обработчики + keyframes
    – user33274
    30 апр 2018 в 7:17
  • так мы можем добиться любого результата
    – user33274
    30 апр 2018 в 7:18

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.