Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Как делать слайдер как в примере?

Как делать слайдер как в примере?


     29.06.2019    слайдер    Общие вопросы по вёрстке, jQuery, Общие вопросы по PHP    935

вопрос
Ребят всем привет подскажите есть ли возможность сделать вот такой слайдер как в примере очень уж нравится как реализован слайдер для портфолио)))
вот сайт
galaxydesign.ru
слайдер почти в самом верху , можно как то такой реализовать на DLE

Ответа пока нет


3 комментария

vitarts
Юзер

vitarts - 2 июля 2019 11:48 -

на js реализуется

Dark5ider
Эксперт

Dark5ider - 2 июля 2019 20:54 -

Подключаем JS И CSS отсюда:

https://github.com/kenwheeler/slick/tree/master/slick

Далее JS:

$('.prod_slider').slick({
		autoplay: true,
		infinite: true,
		speed: 300,
		arrows: false,
		cssEase: 'linear',
		slidesToShow: 4,
		slidesToScroll: 1
	});
	
	$('.prev_prod').click(function(){
		$('.prod_slider').slick('slickPrev');
	});
	
	$('.next_prod').click(function(){
		$('.prod_slider').slick('slickNext');
	});	


Где prev_prod и next_prod - кнопки слайдера.

и соотвтетственно пример самого HTML:

<div class="slider">
		<div class="center">
			<ul class="prod_slider">
					<li class="prod_circ"><a href="fff"><img src="xxx.png" alt=""  onmouseover="this.src='yyy.png';" onmouseout="this.src='xxx.png';" /></a></li>

					<li class="prod_circ"><a href="fff"><img src="xxx.png" alt=""  onmouseover="this.src='yyy.png';" onmouseout="this.src='xxx.png';" /></a></li>

					<li class="prod_circ"><a href="fff"><img src="xxx.png" alt=""  onmouseover="this.src='yyy.png';" onmouseout="this.src='xxx.png';" /></a></li>

					<li class="prod_circ"><a href="fff"><img src="xxx.png" alt=""  onmouseover="this.src='yyy.png';" onmouseout="this.src='xxx.png';" /></a></li>
							
						</ul>
			<span class="prev_prod"></span><span class="next_prod"></span>
		</div>
	</div>


где LI можно заменить на кастом вывод или чего вам надо.

(fff - ссылка, xxx.png - картинка, yyy.png - картинка при наведении )

Alex62
Юзер

Alex62 - 3 июля 2019 17:40 -

Спасибо большое только ничего не получилось))) можно как то разжевать чуть чуть подробнее я сделал пока что из вашего примера вот что.
1.Добавил в main.tpl код html
2.Подключил скрипты и стили с того сайта который вы скинули вот так:


! - Добавьте slick-theme.css, если хотите использовать стили по умолчанию -> 
< link  rel = " stylesheet "  type = " text / css "  href = " //cdn.jsdelivr.net/gh/kenwheeler/slick@ 1.9.0 / slick / slick.css " />
 <! - Добавьте slick-theme.css, если вы хотите использовать стили по умолчанию -> 
< link  rel = " stylesheet "  type = " text / css "  href = " // cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick-theme.css " />


и перед закрывающим тегом боди вот это

< script  type = " text / javascript "  src = " //cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick.min.js " > </ script >


что я сделал не так подскажите пожалуйста подробнее)))
Куда мне вставить js который вы прислали если скрипты подключаю с другого сайта)

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх