Перейти к содержимому

Фотография
- - - - -

Помогите со слайдером!:)


  • Вы не можете создать новую тему
  • Закрытая тема Тема закрыта
Сообщений в теме: 10

#1 Михаил040890

Михаил040890

    Прохожий

    Топикстартер
  • Участник
  • 0
    5 сообщ.

Отправлено 12 Февраль 2018 в 02:37

Подскажите пожалуйста! Переношу свой сайт на простой html - http://veneramusproj...quartet-ludowig
Всё норм, кое-как сделал слайдер в точности как там, но не могу понять как как сделать автоматическое пролистывание одновременно с автоматическим  пролистыванием контроля (кружками внизу слайдера :)
Где-то увидел код, подставил, но контроль тогда вырубается :(
В общем кто может помогите :)

Если что, мой код получился такой

html (может быть там что-то лишнее, так как делал его с урока на youtube и там были боковые стрелки, которые я постарался убрать как смог :)

 


<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">
<input type="radio" name="slider" id="switch4">
<input type="radio" name="slider" id="switch5">
<div id="slides">
<div id="overflow">
<div class="image">
<article><img src="1.gif"></article>
<article><img src="2.gif"></article>
<article><img src="3.gif"></article>
<article><img src="4.gif"></article>
<article><img src="5.gif"></article>
</div>
</div>
</div>
<div id="controls">
<label for="switch1"></label>
<label for="switch2"></label>
<label for="switch3"></label>
<label for="switch4"></label>
<label for="switch5"></label>
</div>
<div id="active">
<label for="switch1"></label>
<label for="switch2"></label>
<label for="switch3"></label>
<label for="switch4"></label>
<label for="switch5"></label>
</div>
</article>
</div>
Код css

#slider{ /*положение слайдера*/

    position: relative;
text-align: center;
    top: 10px;
    padding-top: 2%;
    


}


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


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


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


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


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


}


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




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


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


#switch2:checked ~ #slides .image{
;
}


#switch3:checked ~ #slides .image{
;
}


#switch4:checked ~ #slides .image{
;
}


#switch5:checked ~ #slides .image{
;
}


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


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


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


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


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


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


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


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


}

  • 0

Спонсор

#2 Volly

Volly

    Увлеченный

  • Участник
  • 110
    540 сообщ.

Отправлено 12 Февраль 2018 в 12:18

Слайдер - это javascript, а его-то вы не показали.


  • 0

#3 Михаил040890

Михаил040890

    Прохожий

    Топикстартер
  • Участник
  • 0
    5 сообщ.

Отправлено 12 Февраль 2018 в 13:42

Да, я как-то без javascript вроде сделал автоматическое пролистывание, хотя может быть и нет) А какой код на javascript должен быть для слайдера?)


Сообщение отредактировал Михаил040890: 12 Февраль 2018 в 13:42

  • 0

#4 Volly

Volly

    Увлеченный

  • Участник
  • 110
    540 сообщ.

Отправлено 12 Февраль 2018 в 14:55

Кодов для слайдеров тысячи. Можно выбрать на любой вкус.

Конкретно подсказать не могу, поскольку сайт на wix, а у них там, особенно на бесплатном тарифе, свои заморочки.

Откройте любую страницу своего сайта и в меню браузера выберите "Показать исходный код". Там увидите такое жуткое, что поисковики могут испугаться. Вы этот вопрос выясняли?


  • 0

#5 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1004
    3 630 сообщ.

Отправлено 12 Февраль 2018 в 15:31

Слайдер - это javascript, а его-то вы не показали.

Ты отстал от жизни :)

Я ещё в 2012 делал

https://blog.g63.ru/?p=1279

 

Однако, конечно, если не знаешь нормально HTML и CSS, то лучше взять готовый на JS или jQ


  • 0

#6 Volly

Volly

    Увлеченный

  • Участник
  • 110
    540 сообщ.

Отправлено 12 Февраль 2018 в 18:43

Ты отстал от жизни
Та не, это не я отстал, это браузеры некоторые отстают :) , потому и не всегда советую передовые методы.
  • 0

#7 Михаил040890

Михаил040890

    Прохожий

    Топикстартер
  • Участник
  • 0
    5 сообщ.

Отправлено 13 Февраль 2018 в 00:07

так а возможно сделать такой же слайдер

 

 

Слайдер - это javascript, а его-то вы не показали.

Ты отстал от жизни :)

Я ещё в 2012 делал

https://blog.g63.ru/?p=1279

 

Однако, конечно, если не знаешь нормально HTML и CSS, то лучше взять готовый на JS или jQ

 

так а возможно сделать такой же слайдер, только с контролем (кружками) и чтобы вправо он шёл и без текста?) Просто я обыскал весь интернет, только Javascript или другие варианты, а того простого что-то нигде нет :(


  • 0

#8 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1004
    3 630 сообщ.

Отправлено 13 Февраль 2018 в 01:15

А чем тебе JS не устраивает?

Оно гибче и лучше.

CSS3 слайдеры не имеет смысла делать, это просто поделки FOR FUN.

С ними проблем больше.

 

В гугле по запром "css3 слайдер" уже много слайдеров наделали.

Но смысл у них у всех один и тот же.

 

Могу посоветовать вот этот крутой слайдер

http://bayguzin.ru/m...ta-na-sajt.html

Он был создан буквально на пару недель раньше моего и он круче и, соответственно, сложнее.


  • 0

#9 Михаил040890

Михаил040890

    Прохожий

    Топикстартер
  • Участник
  • 0
    5 сообщ.

Отправлено 13 Февраль 2018 в 02:06

А чем тебе JS не устраивает?

Оно гибче и лучше.

CSS3 слайдеры не имеет смысла делать, это просто поделки FOR FUN.

С ними проблем больше.

 

В гугле по запром "css3 слайдер" уже много слайдеров наделали.

Но смысл у них у всех один и тот же.

 

Могу посоветовать вот этот крутой слайдер

http://bayguzin.ru/m...ta-na-sajt.html

Он был создан буквально на пару недель раньше моего и он круче и, соответственно, сложнее.

Понял, вопрос тогда в другом, можете ли вы помочь мне в создании точно такого же слайдера как на vix с помощью javascript, ну или ссылку бросить:)


  • 0

#10 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1004
    3 630 сообщ.

Отправлено 13 Февраль 2018 в 02:12

На такое способен практически любой самый просто js или jq слайдер.

Выбирайте, ставьте куда вы там хотите, а потом уже подскажем если что-то не понятно.

Например вот одна из первых ссылок статья на Хабре от этого года

https://habrahabr.ru/post/319394/


  • 0

#11 Михаил040890

Михаил040890

    Прохожий

    Топикстартер
  • Участник
  • 0
    5 сообщ.

Отправлено 13 Февраль 2018 в 15:29

На такое способен практически любой самый просто js или jq слайдер.

Выбирайте, ставьте куда вы там хотите, а потом уже подскажем если что-то не понятно.

Например вот одна из первых ссылок статья на Хабре от этого года

https://habrahabr.ru/post/319394/

Понял. Спасибо!


  • 0



Похожие темы Свернуть

Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей