Показывать слайд при наведении, держать слайд на клике - PullRequest
Новая
       4

Показывать слайд при наведении, держать слайд на клике

0 голосов
/ 01 июня 2019

У меня есть слайд-шоу, построенное с использованием Cycle2 . Мне бы хотелось, чтобы показ слайдов происходил с помощью навигации, которая позволяет просматривать различные слайды, наводя курсор на меню. Когда слайд выбирается нажатием на меню, этот слайд остается. Я получил это с помощью хэша, чтобы изменить слайды: https://jsfiddle.net/e0yagvzj/1/

Работает хорошо, но я бы хотел, чтобы функция предварительного просмотра продолжала работать в качестве предварительного просмотра после выбора слайда. Мне бы хотелось, чтобы функция наведения позволяла только временную смену слайдов, а функция щелчка - для постоянной смены слайдов (до тех пор, пока не будет нажат новый слайд). Как мне этого добиться? 

<nav>
  <a href="#1" id="1">1</a>
  <a href="#2" id="2">2</a>
  <a href="#3" id="3">3</a>
</nav>
<div class="content">
  <div class="cycle-slideshow"
  data-cycle-slides="> div"
  data-cycle-timeout="0"
  data-cycle-prev=".prev"
  data-cycle-next=".next"
  data-cycle-speed="1"
  data-cycle-fx="fadeOut"
  >
    <div data-cycle-hash="1">
      <img src="https://placeimg.com/640/480/animals">
    </div>
    <div data-cycle-hash="1">
      <img src="https://placeimg.com/640/480/animals/2">
    </div>
    <div data-cycle-hash="2">
      <img src="https://placeimg.com/640/480/arch">
    </div>
    <div data-cycle-hash="2">
      <img src="https://placeimg.com/640/480/arch/2">
    </div>
    <div data-cycle-hash="3">
      <img src="https://placeimg.com/640/480/nature">
    </div>
    <div data-cycle-hash="3">
      <img src="https://placeimg.com/640/480/nature/2">
    </div>
  </div>
  <div class="controls">
    <div class="prev">Prev</div>
    <div class="next">Next</div>
    <div class="close">Close</div>
  </div>
</div>

JS: 

$(document).ready(function(){
              var clicked=false;

                $('nav a').on('click', function() {
                    clicked = !clicked;
               $('nav a').removeClass('clicked');
              $(this).addClass('clicked');
                });

                $('nav a').hover(
                  function() {
                    $('.content').addClass('visible')
              var href = $(this).attr('href');
              window.location.hash = href
              $('.content').addClass('visible');
                    }
                  ,function() {
                      if (!clicked) {
                         $('.content').removeClass('visible');
                      }
                  }
                ); 

                $('.close').on('click', function() {
                    $('.content').removeClass('visible');
              $('nav a').removeClass('clicked');
                    window.location.hash = ""
                    clicked = !clicked;
                });

            });
...