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


Помогите Вставить Слайдер

Автор 57P, 25 окт. 2016 22:43

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 12

#1 57P

57P

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 331 сообщений

Отправлено 25 Октябрь 2016 - 22:43

Добрый день, хочу вставить слайдер в новость, подскажите как реализовать:

по инструкции сделал 3 пункта)
Slider w/thumbnail slider


JS
$(window).load(function() {
// The slider being synced must be initialized first
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});

$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});


html
<!-- Place somewhere in the <body> of your page -->
<div id="slider" class="flexslider">
<ul class="slides">
<li>
	 <img src="slide1.jpg" />
</li>
<li>
	 <img src="slide2.jpg" />
</li>
<li>
	 <img src="slide3.jpg" />
</li>
<li>
	 <img src="slide4.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
	 <img src="slide1.jpg" />
</li>
<li>
	 <img src="slide2.jpg" />
</li>
<li>
	 <img src="slide3.jpg" />
</li>
<li>
	 <img src="slide4.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>

#2 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 26 Октябрь 2016 - 09:27

Просмотр сообщения57P (25 Октябрь 2016 - 22:43) писал:

Добрый день, хочу вставить слайдер в новость, подскажите как реализовать:

по инструкции сделал 3 пункта)
Slider w/thumbnail slider


JS
$(window).load(function() {
// The slider being synced must be initialized first
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});

$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});


html
<!-- Place somewhere in the <body> of your page -->
<div id="slider" class="flexslider">
<ul class="slides">
<li>
	 <img src="slide1.jpg" />
</li>
<li>
	 <img src="slide2.jpg" />
</li>
<li>
	 <img src="slide3.jpg" />
</li>
<li>
	 <img src="slide4.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
	 <img src="slide1.jpg" />
</li>
<li>
	 <img src="slide2.jpg" />
</li>
<li>
	 <img src="slide3.jpg" />
</li>
<li>
	 <img src="slide4.jpg" />
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>

Здравствуйте. Уточните, какой инструкций Вы пользовались? Лучше использовать: http://storeland.ru/about/faq#80

#3 57P

57P

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 331 сообщений

Отправлено 26 Октябрь 2016 - 21:46

Просмотр сообщенияMikDark (26 Октябрь 2016 - 09:27) писал:

Здравствуйте. Уточните, какой инструкций Вы пользовались? Лучше использовать: http://storeland.ru/about/faq#80
да ей, но в ней говорится про споллер на главный экран, а мне нужена в новость

#4 Mr.Nito

Mr.Nito

    Активный участник

  • Модераторы
  • 1 364 сообщений

Отправлено 02 Ноябрь 2016 - 16:01

Просмотр сообщения57P (26 Октябрь 2016 - 21:46) писал:

да ей, но в ней говорится про споллер на главный экран, а мне нужена в новость

Здравствуйте.
Простите за долгое ожидание ответа.
При редактировании новости через кнопку "Источник"

добавьте код

<div class="flexslider" id="carousel">
<ul class="slides">
<li>Текст или изображение</li>
<li>Текст или изображение 1</li>
<li>Текст или изображение 2</li>
<li>Текст или изображение 3</li>
<li>Текст или изображение 4</li>
<li>Текст или изображение 5</li>
</ul>
</div>


<script>
$(window).load(function() {
// The slider being synced must be initialized first
$("#carousel").flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 910,
itemMargin: 5,
asNavFor: "#slider"
});
$("#slider").flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: "#carousel"
});
});
</script>

#5 57P

57P

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 331 сообщений

Отправлено 12 Январь 2017 - 00:09

Доделайте пожалуйста слайд.
1. при клике или свайпе пальцем выдает ошибку.
2. нет стрелок
3. непонятно сколько изображений http://flexslider.wo...ail-slider.html
  • Сделайте пожалуйста по шаблону Slider w/thumbnail slider чтобы внизу слайдера отображались мини копии изображений.
  • Если сложно, то сделайте как в Basic Slider который в FAQ
http://xxxxxxxx.ru/news/testt


заранее спасибо)

#6 Stasya

Stasya

    Активный участник

  • Модератоpы
  • 4 007 сообщений

Отправлено 14 Февраль 2017 - 17:48

Просмотр сообщения57P (12 Февраль 2017 - 21:33) писал:

Ап, 1 месяц тишины
Здравствуйте. Простите за длительное ожидание ответа. Произвела Вам все изменения сама. Проверьте, пожалуйста.

#7 57P

57P

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 331 сообщений

Отправлено 14 Февраль 2017 - 23:56

немного не то, что я просил :D
хотелось бы как в оригинале)

Прикрепленные изображения

  • слайдер.jpg

#8 57P

57P

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 331 сообщений

Отправлено 10 Март 2017 - 00:27

up

#9 Stasya

Stasya

    Активный участник

  • Модератоpы
  • 4 007 сообщений

Отправлено 13 Март 2017 - 17:16

Просмотр сообщения57P (14 Февраль 2017 - 23:56) писал:

немного не то, что я просил :D
хотелось бы как в оригинале)
Не могли бы Вы уточнить что именно не так?
На данный момент обнаружила такие отличия:
В файле flexslider.css найдите блок
.flex-direction-nav a {
	text-decoration: none;
	display: block;
	width: 40px;
	height: 60px;
	margin: -20px 0 0;
	position: absolute;
	top: 50%;
	z-index: 10;
	opacity: 0;
	cursor: pointer;
	color: rgba(0, 0, 0, 0.8);
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
и замените его на 
.flex-direction-nav a {
	text-decoration: none;
	display: block;
	width: 40px;
	height: 42px;
	margin: -20px 0 0;
	position: absolute;
	top: 50%;
	z-index: 10;
	opacity: 0;
	overflow: hidden;
	cursor: pointer;
	color: rgba(0, 0, 0, 0.8);
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
В конец файла main.css добавьте блок 
#carousel img {
	display: block;
	opacity: .5;
	cursor: pointer;
}
#carousel .flex-active-slide img {
	opacity: 1;
	cursor: default;
}

#10 57P

57P

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 331 сообщений

Отправлено 13 Март 2017 - 22:44

Просмотр сообщенияStasya (13 Март 2017 - 17:16) писал:

Не могли бы Вы уточнить что именно не так?
На данный момент обнаружила такие отличия:
В файле flexslider.css найдите блок
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 40px;
height: 60px;
margin: -20px 0 0;
position: absolute;
top: 50%;
z-index: 10;
opacity: 0;
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
и замените его на 
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 40px;
height: 42px;
margin: -20px 0 0;
position: absolute;
top: 50%;
z-index: 10;
opacity: 0;
overflow: hidden;
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
В конец файла main.css добавьте блок 
#carousel img {
display: block;
opacity: .5;
cursor: pointer;
}
#carousel .flex-active-slide img {
opacity: 1;
cursor: default;
}
какие то лишние надписи вылезли, вернул как было
http://111111.ru/news/testt в принципе получил то что хотел, осталось его сделать компактным и уменьшить расстояние между изображением и миниатюрами, на пример в 3 пикселя и запихнуть все это дело в
<li>  в рамку   </li>

#11 Stasya

Stasya

    Активный участник

  • Модератоpы
  • 4 007 сообщений

Отправлено 20 Март 2017 - 11:35

Просмотр сообщения57P (13 Март 2017 - 22:44) писал:

какие то лишние надписи вылезли, вернул как было
http://111111.ru/news/testt в принципе получил то что хотел, осталось его сделать компактным и уменьшить расстояние между изображением и миниатюрами, на пример в 3 пикселя и запихнуть все это дело в
<li> в рамку </li>
Здравствуйте. Уточните, пожалуйста, что именно необходимо сделать компактным и что необходимо обернуть в рамку?

Прикрепленные изображения

  • Screenshot_206.jpg

#12 57P

57P

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 331 сообщений

Отправлено 20 Март 2017 - 12:11

Стоп, галерею не трогать) речь о слайдере http://111111.ru/news/testt

Прикрепленные изображения

  • Новый точечный рисунок.jpg

#13 Stasya

Stasya

    Активный участник

  • Модератоpы
  • 4 007 сообщений

Отправлено 23 Март 2017 - 13:13

Просмотр сообщения57P (20 Март 2017 - 12:11) писал:

Стоп, галерею не трогать) речь о слайдере http://111111.ru/news/testt
Сейчас у Вас весь этот блок с картинками (слайдер и галлерея) растягиваются на всю ширину контента. Вы это хотите уменьшить? Прошу схематично показать на скриншоте что необходимо сделать.
Обратно в Шаблон Рассвет


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

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Рассвет
  5. Privacy Policy