Запрет миниатюр FlexSlider от изменения основного изображения при прокрутке на мобильном телефоне - PullRequest
Новая
       78

Запрет миниатюр FlexSlider от изменения основного изображения при прокрутке на мобильном телефоне

1 голос
/ 03 февраля 2020

Я пытаюсь заставить flexslider изменять основное изображение только при нажатии на миниатюру на мобильном телефоне. Прямо сейчас происходит следующее: если вы прокручиваете миниатюры, основное изображение тоже меняется. Вы можете увидеть образец здесь. https://dev.time2visit.com/hotel/destination_package_view/116

Любая помощь очень ценится. 

<div id="slider" class="flexslider">
                        <ul class="slides">
                            <li>
                                <img src="<?= base_url("/uploads/feature_image/{$hotel->feature_image}") ?>" alt="Image Alternative text" title="" class="hotel_property_feature_img">
                            </li>
                            <?php foreach ($hotel->images as $image) : ?>
                                <li>
                                    <img src="<?= base_url("/uploads/images/{$image}") ?>" alt="Image Alternative text" title="Outside Crowne Plaza">
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                    <div id="carousel" class="flexslider">
                        <ul class="slides">
                            <li>
                                <img src="<?= base_url("/uploads/feature_image/{$hotel->feature_image}") ?>" alt="Image Alternative text" title="" class="hotel_property_feature_img">
                            </li>
                            <?php foreach ($hotel->images as $image) : ?>
                                <li>
                                    <img src="<?= base_url("/uploads/images/{$image}") ?>" alt="Image Alternative text" title="Outside Crowne Plaza">
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>

Ниже приведен JS

<script>
$(window).load(function() {
    // The slider being synced must be initialized first
    $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 210,
        itemMargin: 5,
        asNavFor: '#slider'
    });
    $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel"
    });
});
</script>
...