+ Ответить в теме
Показано с 1 по 8 из 8

Тема: Два CSS слайдера на одной странице

  1. #1
    Новичок algork на пути к лучшему Аватар для algork
    Регистрация
    04.07.2017
    Сообщений
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Два CSS слайдера на одной странице

    Всем привет!

    Я новичок, учу html и css самостоятельно.

    Такая ситуация: есть два CSS слайдера на одной странице, которые работают.
    Но есть два дефекта - 1. Стрелки смены слайда (влево-вправо) отображаются только на активном слайдере, на другом же исчезают.
    2. При переключении с одного слайдера на другой, ранее активный слайдер сбрасывается до 1 слайда, независимо от того, на каком слайде он был до этого.


    Примерно понимаю, где нужно копать, но что-то второй день пазл не сходится.

    Прошу Вашей помощи!

    Слайдер номер 1

    <div class="all">
    <input checked type="radio" name="respond" id="desktop">
    <article id="slider">
    <input checked type="radio" name="slider" id="switch1">
    <input type="radio" name="slider" id="switch2">
    <input type="radio" name="slider" id="switch3">
    <div id="slides">
    <div id="overflow">
    <div class="image">
    <article><img src="images/1.jpg">
    <div class="link">
    <div class="button_text3"><a href="#">Описание</a></div>
    </div>
    </article>
    <article><img src="images/2.jpg">
    <div class="link">
    <div class="button_text3"><a href="#">Описание</a></div>
    </div>
    </article>
    <article><img src="images/3.jpg">
    <div class="link">
    <div class="button_text3"><a href="#">Описание</a></div>
    </div>
    </article>

    </div>
    </div>
    </div>
    <div id="controls">
    <label id="A" for="switch1"></label>
    <label id="A" for="switch2"></label>
    <label id="A" for="switch3"></label>

    </div>
    <div id="active">
    <label id="A" for="switch1"></label>
    <label id="A" for="switch2"></label>
    <label id="A" for="switch3"></label>

    </div>
    </article>
    </div>



    #slider { /*положение слайдера*/
    position: relative;
    text-align: center;
    top: 40px;
    float: left;
    width: 520px;

    }

    #slider{ /*центровка слайдера*/
    margin: left;

    }

    #slides article{ /*все изображения справа друг от доруга*/
    width: 20%;
    float: left;
    }

    #slides .image{ /*устанавливает общий размер блока с изображениями*/
    width: 500%;
    line-height: 0;
    }

    #overflow{ /*сркывает все, что находится за пределами этого блока*/
    width: 100%;
    overflow: hidden;
    }

    article img{ /*размер изображений слайдера*/
    width: 100%;
    height: 350px;
    }

    #desktop:checked ~ #slider{ /*размер всего слайдера*/
    max-width: 520px; /*максимальнная длинна*/
    }

    /*настройка переключения и положения для левой стрелки*/
    /*если свич1-5 активны, то идет обращение к лейблу из блока с id контролс*/
    #switch1:checked ~ #controls #A:nth-child(3),
    #switch2:checked ~ #controls #A:nth-child(1),
    #switch3:checked ~ #controls #A:nth-child(2){
    background: url('../images/prev1.png') no-repeat; /*заливка фона картинкой без повторений*/
    float: left;
    margin-left: 20px; /*сдвиг влево*/
    display: block;
    height: 38px;
    width: 38px;
    }

    /*настройка переключения и положения для правой стрелки*/
    #switch1:checked ~ #controls #A:nth-child(2),
    #switch2:checked ~ #controls #A:nth-child(3),
    #switch3:checked ~ #controls #A:nth-child(1){
    background: url('../images/next1.png') no-repeat; /*заливка фона картинкой без повторений*/
    float: right;
    margin-right: 20px; /*сдвиг вправо*/
    display: block;
    height: 38px;
    width: 38px;
    }

    #A, a{ /*при наведении на стрелки или переключатели - курсор изменится*/
    cursor: pointer;
    }


    .all input{ /*скрывает стандартные инпуты (чекбоксы) на странице*/
    display: none;

    }

    /*позиция изображения при активации переключателя*/
    #switch1:checked ~ #slides .image{
    margin-left: 0;
    }

    #switch2:checked ~ #slides .image{
    margin-left: -100%;
    }

    #switch3:checked ~ #slides .image{
    margin-left: -200%;
    }

    #controls{ /*положение блока всех управляющих элементов*/
    margin-top: -235px;
    width: 100%;
    height: 115px;
    }

    #active #A{ /*стиль отдельного переключателя*/
    border-radius: 10px; /*скругление углов*/
    display: inline-block; /*расположение в строку*/
    width: 15px;
    height: 15px;
    border: 2px solid #ffffff;


    }

    #active{ /*расположение блока с переключателями*/
    margin-top: 50px;
    text-align: center;
    }

    #active #A:hover{ /*поведение чекбокса при наведении*/
    background: #ffffff;
    border-color: #777 !important; /*выполнение в любом случае*/
    }

    /*цвет активного лейбла при активации чекбокса*/
    #switch1:checked ~ #active #A:nth-child(1),
    #switch2:checked ~ #active #A:nth-child(2),
    #switch3:checked ~ #active #A:nth-child(3){
    background: #ffffff;
    border-color: #ffffff !important;
    }

    #slides .image{ /*анимация пролистывания изображений*/
    transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    }

    #controls #A:hover{ /*прозрачность стрелок при наведении*/
    opacity: 0.6;
    }

    #controls #A{ /*прозрачность стрелок при отводе курсора*/
    transition: opacity 0.2s ease-out;
    }

    article a {
    color: #ffffff;
    text-decoration: none;
    }

    article .link {
    background: #6e758b;
    margin-left: 188.5px;
    position: relative;
    top: -110px;
    }

    article .button_text3 {
    font-family: Tahoma;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    }


    Слайдер номер 2


    <div class="allB">
    <input checked type="radio" name="respond" id="desktopB">
    <article id="sliderB">
    <input checked type="radio" name="slider" id="switch11">
    <input type="radio" name="slider" id="switch12">
    <input type="radio" name="slider" id="switch13">
    <input type="radio" name="slider" id="switch14">
    <input type="radio" name="slider" id="switch15">
    <div id="slidesB">
    <div id="overflowB">
    <div class="image">
    <article><img src="images/1.jpg">
    <div class="link">
    <div class="button_text3"><a href="#">Описание</a></div>
    </div>
    </article>
    <article><img src="images/2.jpg">
    <div class="link">
    <div class="button_text3"><a href="#">Описание</a></div>
    </div>
    </article>
    <article><img src="images/3.jpg">
    <div class="link">
    <div class="button_text3"><a href="#">Описание</a></div>
    </div>
    </article>

    </div>
    </div>
    </div>
    <div id="controlsB">
    <label id="B" for="switch11"></label>
    <label id="B" for="switch12"></label>
    <label id="B" for="switch13"></label>
    </div>
    <div id="activeB">
    <label id="B" for="switch11"></label>
    <label id="B" for="switch12"></label>
    <label id="B" for="switch13"></label>
    </div>
    </article>
    </div>



    #sliderB { /*положение слайдера*/
    position: relative;
    text-align: center;
    top: 40px;
    float: left;
    width: 520px;

    }

    #sliderB{ /*центровка слайдера*/
    margin: left;

    }

    #slidesB article{ /*все изображения справа друг от доруга*/
    width: 20%;
    float: left;
    }

    #slidesB .image{ /*устанавливает общий размер блока с изображениями*/
    width: 500%;
    line-height: 0;
    }

    #overflowB{ /*сркывает все, что находится за пределами этого блока*/
    width: 100%;
    overflow: hidden;
    }

    article img{ /*размер изображений слайдера*/
    width: 100%;
    height: 350px;
    }

    #desktopB:checked ~ #sliderB{ /*размер всего слайдера*/
    max-width: 520px; /*максимальнная длинна*/
    }

    /*настройка переключения и положения для левой стрелки*/
    /*если свич1-5 активны, то идет обращение к лейблу из блока с id контролс*/
    #switch11:checked ~ #controlsB #B:nth-child(3),
    #switch12:checked ~ #controlsB #B:nth-child(1),
    #switch13:checked ~ #controlsB #B:nth-child(2){
    background: url('../images/prev1.png') no-repeat; /*заливка фона картинкой без повторений*/
    float: left;
    margin-left: 20px; /*сдвиг влево*/
    display: block;
    height: 38px;
    width: 38px;
    }


    /*настройка переключения и положения для правой стрелки*/
    #switch11:checked ~ #controlsB #B:nth-child(2),
    #switch12:checked ~ #controlsB #B:nth-child(3),
    #switch13:checked ~ #controlsB #B:nth-child(1){
    background: url('../images/next1.png') no-repeat; /*заливка фона картинкой без повторений*/
    float: right;
    margin-right: 20px; /*сдвиг вправо*/
    display: block;
    height: 38px;
    width: 38px;
    }


    #B, a{ /*при наведении на стрелки или переключатели - курсор изменится*/
    cursor: pointer;
    }


    .allB input{ /*скрывает стандартные инпуты (чекбоксы) на странице*/
    display: none;

    }


    /*позиция изображения при активации переключателя*/
    #switch11:checked ~ #slidesB .image{
    margin-left: 0;
    }

    #switch12:checked ~ #slidesB .image{
    margin-left: -100%;
    }

    #switch13:checked ~ #slidesB .image{
    margin-left: -200%;
    }


    #controlsB{ /*положение блока всех управляющих элементов*/
    margin-top: -235px;
    width: 100%;
    height: 115px;
    }

    #activeB #B{ /*стиль отдельного переключателя*/
    border-radius: 10px; /*скругление углов*/
    display: inline-block; /*расположение в строку*/
    width: 15px;
    height: 15px;
    border: 2px solid #ffffff;


    }

    #activeB{ /*расположение блока с переключателями*/
    margin-top: 50px;
    text-align: center;
    }

    #activeB #B:hover{ /*поведение чекбокса при наведении*/
    background: #ffffff;
    border-color: #777 !important; /*выполнение в любом случае*/
    }

    /*цвет активного лейбла при активации чекбокса*/
    #switch11:checked ~ #activeB #B:nth-child(1),
    #switch12:checked ~ #activeB #B:nth-child(2),
    #switch13:checked ~ #activeB #B:nth-child(3){
    background: #ffffff;
    border-color: #ffffff !important;
    }

    #slidesB .image{ /*анимация пролистывания изображений*/
    transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    }

    #controlsB #B:hover{ /*прозрачность стрелок при наведении*/
    opacity: 0.6;
    }

    #controlsB #B{ /*прозрачность стрелок при отводе курсора*/
    transition: opacity 0.2s ease-out;
    }

    article a {
    color: #ffffff;
    text-decoration: none;
    }

    article .link {
    background: #6e758b;
    margin-left: 188.5px;
    position: relative;
    top: -110px;
    }

    article .button_text3 {
    font-family: Tahoma;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    }
    Последний раз редактировалось algork; 04.07.2017 в 08:55.

  2. #2
    Пользователь AlexZaw на пути к лучшему Аватар для AlexZaw
    Регистрация
    21.06.2017
    Сообщений
    38
    Thanks
    0
    Thanked 9 Times in 8 Posts
    первое: кнопки исчезают, скорее всего, из-за одинаковых имен инпутов у слайдеров, попробуйте второму задать input name="slider2" например.
    второе: шесть одинаковых id у label вас не смущают? id должен быть уникальным для всей страницы, из-за этого тоже могут быть проблемы со слайдером, попробуйте вообще убрать у них id, тем более в css они все-равно выбираются через nth-child

  3. The Following 2 Users Say Thank You to AlexZaw For This Useful Post:

    algork (05.07.2017), _ALEX (29.08.2017)

  4. #3
    Новичок algork на пути к лучшему Аватар для algork
    Регистрация
    04.07.2017
    Сообщений
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Цитата Сообщение от AlexZaw Посмотреть сообщение
    первое: кнопки исчезают, скорее всего, из-за одинаковых имен инпутов у слайдеров, попробуйте второму задать input name="slider2" например.
    второе: шесть одинаковых id у label вас не смущают? id должен быть уникальным для всей страницы, из-за этого тоже могут быть проблемы со слайдером, попробуйте вообще убрать у них id, тем более в css они все-равно выбираются через nth-child
    Спасибо огромное! Поменял input name у второго слайдера, и кнопки перестали убегать, да и вторая проблема со сбросом до первого слайда тоже ушла.

  5. #4
    Модератор Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Аватар для Den1xxx
    Регистрация
    24.05.2011
    Адрес
    Гомель
    Сообщений
    2,501
    Thanks
    125
    Thanked 214 Times in 205 Posts
    Записей в дневнике
    9
    Цитата Сообщение от AlexZaw Посмотреть сообщение
    второе: шесть одинаковых id у label вас не смущают? id должен быть уникальным для всей страницы, из-за этого тоже могут быть проблемы со слайдером, попробуйте вообще убрать у них id, тем более в css они все-равно выбираются через nth-child
    одинаковые id лучше поменять на классы.

  6. #5
    Новичок algork на пути к лучшему Аватар для algork
    Регистрация
    04.07.2017
    Сообщений
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Цитата Сообщение от Den1xxx Посмотреть сообщение
    одинаковые id лучше поменять на классы.
    Да, спасибо, забыл упомянуть. Пытался их полностью убрать - пропадали стрелки, и переключатели становились неактивными. С id тоже все работает, но поменял на классы.

  7. #6
    Новичок ekaterina445885 на пути к лучшему Аватар для ekaterina445885
    Регистрация
    05.07.2017
    Сообщений
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    отлично, спасибо!

  8. #7
    Новичок _ALEX на пути к лучшему Аватар для _ALEX
    Регистрация
    29.08.2017
    Сообщений
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Хорошо

    Цитата Сообщение от AlexZaw Посмотреть сообщение
    первое: кнопки исчезают, скорее всего, из-за одинаковых имен инпутов у слайдеров, попробуйте второму задать input name="slider2" например.
    второе: шесть одинаковых id у label вас не смущают? id должен быть уникальным для всей страницы, из-за этого тоже могут быть проблемы со слайдером, попробуйте вообще убрать у них id, тем более в css они все-равно выбираются через nth-child

    Ты красавчик, спасибо
    тоже долго игрался все название поменял кроме инпутов

  9. #8
    Новичок mark77 на пути к лучшему Аватар для mark77
    Регистрация
    23.09.2018
    Сообщений
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    помогите

    Что я не так делаю?

    <div class="allB">
    <input checked type="radio" name="respond" id="desktopB">
    <article id="sliderB">
    <input checked type="radio" name="slider2" id="switch1">
    <input type="radio" name="slider2" id="switch2">
    <input type="radio" name="slider2" id="switch3">

    <div id="slidesB">
    <div id="overflowB">
    <div class="image">
    <article><img src="images\ua\4.jpg"></article>
    <article><img src="images\ua\5.jpg"></article>
    <article><img src="images\ua\6.jpg"></article>

    </div>
    </div>
    </div>
    <div id="controlsB">
    <label id="B" for="switch11"></label>
    <label id="B" for="switch12"></label>
    <label id="B" for="switch13"></label>

    </div>
    <div id="activeB">
    <label id="B" for="switch11"></label>
    <label id="B" for="switch12"></label>
    <label id="B" for="switch13"></label>

    </div>
    </article>
    </div>


    #sliderB { /*положение слайдера*/
    position: relative;
    text-align: center;
    top: 10px;
    }

    #sliderB{ /*центровка слайдера*/
    margin: 0 auto;
    }

    #slidesB article{ /*все изображения справа друг от доруга*/
    width: 20%;
    float: left;
    }

    #slidesB .image{ /*устанавливает общий размер блока с изображениями*/
    width: 500%;
    line-height: 0;
    }

    #overflowB{ /*сркывает все, что находится за пределами этого блока*/
    width: 100%;
    overflow: hidden;
    }

    article img{ /*размер изображений слайдера*/
    width: 100%;
    }

    #desktopB:checked ~ #sliderB{ /*размер всего слайдера*/
    max-width: 960px; /*максимальнная длинна*/
    }

    /*настройка переключения и положения для левой стрелки*/
    /*если свич1-5 активны, то идет обращение к лейблу из блока с id контролс*/
    #switch11:checked ~ #controlsB #B:nth-child(3),
    #switch12:checked ~ #controlsB #B:nth-child(1),
    #switch13:checked ~ #controlsB #B:nth-child(2)
    {
    background: url('prev.png') no-repeat; /*заливка фона картинкой без повторений*/
    float: left;
    margin: -200px 0 0 0; /*сдвиг влево*/
    display: block;
    height: 68px;
    width: 68px;
    }

    /*настройка переключения и положения для правой стрелки*/
    #switch11:checked ~ #controlsB #B:nth-child(2),
    #switch12:checked ~ #controlsB #B:nth-child(3),
    #switch13:checked ~ #controlsB #B:nth-child(1)
    {
    background: url('next.png') no-repeat; /*заливка фона картинкой без повторений*/
    float: right;
    margin: -200px -84px 0 0; /*сдвиг вправо*/
    display: block;
    height: 68px;
    width: 68px;
    }

    #B, a{ /*при наведении на стрелки или переключатели - курсор изменится*/
    cursor: pointer;
    }

    .allB input{ /*скрывает стандартные инпуты (чекбоксы) на странице*/
    display: none;
    }

    /*позиция изображения при активации переключателя*/
    #switch11:checked ~ #slidesB .image{
    margin-left: 0;
    }

    #switch12:checked ~ #slidesB .image{
    margin-left: -100%;
    }

    #switch13:checked ~ #slidesB .image{
    margin-left: -200%;
    }


    #controlsB{ /*положение блока всех управляющих элементов*/
    margin: -25% 0 0 0;
    width: 70%;
    height: 1px;
    }

    #activeB #B{ /*стиль отдельного переключателя*/
    border-radius: 10px; /*скругление углов*/
    display: inline-block; /*расположение в строку*/
    width: 15px;
    height: 15px;
    background: #bbb;
    }

    #activeB{ /*расположение блока с переключателями*/
    margin: 23% 0 0;
    text-align: center;
    }

    #activeB #B:hover{ /*поведение чекбокса при наведении*/
    background: #76c8ff;
    border-color: #777 !important; /*выполнение в любом случае*/
    }

    /*цвет активного лейбла при активации чекбокса*/
    #switch11:checked ~ #activeB #B:nth-child(1),
    #switch12:checked ~ #activeB #B:nth-child(2),
    #switch13:checked ~ #activeB #B:nth-child(3){
    background: #18a3dd;
    border-color: #18a3dd !important;
    }

    #slidesB .image{ /*анимация пролистывания изображений*/
    transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    }

    #controlsB #B:hover{ /*прозрачность стрелок при наведении*/
    opacity: 0.6;
    }

    #controlsB #B{ /*прозрачность стрелок при отводе курсора*/
    transition: opacity 0.2s ease-out;
    }
    Последний раз редактировалось mark77; 23.09.2018 в 21:38.

+ Ответить в теме

Похожие темы

  1. 2 и более слайдера на одной странице
    от VeronikaBens в разделе JavaScript
    Ответов: 3
    Последнее сообщение: 19.02.2015, 15:39
  2. Ответов: 3
    Последнее сообщение: 20.11.2011, 23:15
  3. Несколько виджетов на одной странице
    от Костя Никулин в разделе JavaScript
    Ответов: 0
    Последнее сообщение: 20.08.2011, 16:18
  4. Ответов: 2
    Последнее сообщение: 18.03.2011, 07:54
  5. Ответов: 7
    Последнее сообщение: 31.03.2010, 18:10

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения