Блог

Главная - Вопросы по программированию - Переключатель слайдера чистого CSS первый щелчок без анимации

Переключатель слайдера чистого CSS первый щелчок без анимации

#css #slider #transition #radio

Вопрос:

Мне нужна ваша помощь для почти полностью css-слайдера. Когда я нажимаю в первый раз на переключатель, анимация не выполняется … При 2-м щелчке все в порядке. Я не знаю, является ли это javascript или css. Вы можете помочь мне с этой ошибкой?

https://jsfiddle.net/italya/prbtna3o/

 <!DOCTYPE html>
<html>
<head>
    <title>TEST</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="TEST created with cssSlider, a free wizard program that helps you easily generate beautiful web slideshow" />

    
</head>
<body style="background-color:#d7d7d7; margin: auto; text-align: center;">

        <!-- Start cssSlider.com -->
        <!-- Generated by cssSlider.com 2.1 -->
        <link rel="stylesheet" href="cssslider5_files/csss_engine1/style.css">
        <!--[if IE]><link rel="stylesheet" href="cssslider5_files/csss_engine1/ie.css"><![endif]-->
        <!--[if lte IE 9]><script type="text/javascript" src="cssslider5_files/csss_engine1/ie.js"></script><![endif]-->
        <script type="text/javascript" src="cssslider5_files/csss_engine1/gestures.js"></script> <div class='csslider1 autoplay '>
        <input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide' >
        <input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide' >
        <input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide' >
        <input name="cs_anchor1" id='cs_slide1_3' type="radio" class='cs_anchor slide' >
        <input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' checked>
        <input name="cs_anchor1" id='cs_pause1_0' type="radio" class='cs_anchor pause'>
        <input name="cs_anchor1" id='cs_pause1_1' type="radio" class='cs_anchor pause'>
        <input name="cs_anchor1" id='cs_pause1_2' type="radio" class='cs_anchor pause'>
        <input name="cs_anchor1" id='cs_pause1_3' type="radio" class='cs_anchor pause'>
        <ul>
            <li class="cs_skeleton"><img src="https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg" style="width: 100%;"></li>
            <li class='num0 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE1' title='SLIDE1' /></li>
            <li class='num1 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE2' title='SLIDE2' /></li>
            <li class='num2 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE3' title='SLIDE3' /></li>
            <li class='num3 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE4' title='SLIDE4' /></li>
        </ul><div class="cs_engine"><a href="http://cssslider.com">slider</a> by cssSlider.com v2.1</div>
        <div class='cs_description'>
            <label class='num0'><span class="cs_title"><span class="cs_wrapper">SLIDE1</span></span></label>
            <label class='num1'><span class="cs_title"><span class="cs_wrapper">SLIDE2</span></span></label>
            <label class='num2'><span class="cs_title"><span class="cs_wrapper">SLIDE3</span></span></label>
            <label class='num3'><span class="cs_title"><span class="cs_wrapper">SLIDE4</span></span></label>
        </div>
        
        
        <div class='cs_bullets'>
            <label class='num0' for='cs_slide1_0'> <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide1.jpg' alt='SLIDE1' title='SLIDE1' /></span></label>
            <label class='num1' for='cs_slide1_1'> <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide2.jpg' alt='SLIDE2' title='SLIDE2' /></span></label>
            <label class='num2' for='cs_slide1_2'> <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide3.jpg' alt='SLIDE3' title='SLIDE3' /></span></label>
            <label class='num3' for='cs_slide1_3'> <span class='cs_point'></span>
                <span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide4.jpg' alt='SLIDE4' title='SLIDE4' /></span></label>
        </div>
        </div>
        <!-- End cssSlider.com -->
    
        
</body>
</html>

Большое спасибо

Комментарии:

1. возможно, вам придется предоставить js, который вы написали, ссылка на пример минимизировала js из какой-то библиотеки, я думаю.

2. Я удалил все JS, и он по — прежнему работает одинаково. Нэнси, ты что-нибудь изменила в этой библиотеке слайдеров? Не могли бы вы проверить их FAQ?

Метки: