Перейти к публикации

Слайдер внутри слайдера

panovgor

Автор: panovgor,
в В помощь вебмастеру

 Рассказать Подписчики 0

Рекомендованные сообщения

panovgor

panovgor 2

Опубликовано:
Опубликовано:

Здравствуйте. Есть необходимость разместить горизонтальный слайдер внутри вертикального. Горизонтальный как бы должен быть первой страницей вертикального. Сейчас работает только вертикальный, а горизонтальный представлен просто статичной картинкой и никакого движения. Может кто-то подсказать в чём моя ошибка? Вот сайт на котором всё это хозяйство находится. http://supertest.eurodir.ru/

Ссылка на сообщение
Поделиться на других сайтах
odys

odys 385

Опубликовано:
Опубликовано:
36 минут назад, trianon14 сказал:

То что вы задумали реализовать невозможно. На странице может быть только один jQuery.

да что ты за бред постоянно пишешь? Или просто чтобы было?

 

46 минут назад, panovgor сказал:

Может кто-то подсказать в чём моя ошибка?

это вопрос из разряда про стили? Пишешь про одно, а потом выясняется, что имел ввиду совершенно другое.

Рассказывай подробнее, что именно не получается? Желательно с наглядным примером в виде кода

Ссылка на сообщение
Поделиться на других сайтах
panovgor

panovgor 2

Опубликовано:
Опубликовано: Автор

А что со стилями? Там просто некоторое уточнение было, что на главной оба стиля работают, а на внутренних страницах один стиль. А какой код вы имеете ввиду по слайдерам? Я дал ссылку на всё тот же сайт - то есть и исходный код и файлы JS в доступе. Если нужно ещё что-то, то я здесь выложу. Там тоже нужно разделить подключение файлов? 

Ссылка на сообщение
Поделиться на других сайтах
odys

odys 385

Опубликовано:
Опубликовано: (изменено)
16 минут назад, panovgor сказал:

Если нужно ещё что-то, то я здесь выложу

конечно нужно, всё, что я увидел в исходном коде, это подключение плагина и всё. А где его инициализация...

и вообще этот плагин, который стоит у тебя — платный, если ты его покупал, должна быть тогда инструкция, как его подключать, если тупо взял, то советую несколько раз подумать, прежде чем его использовать. Я так понимаю, сайт для компании делается, а воровство опасно.

поищи что-нибудь поинтереснее https://www.google.com/?q=jquery+slider

Изменено пользователем odys
Ссылка на сообщение
Поделиться на других сайтах
panovgor

panovgor 2

Опубликовано:
Опубликовано: Автор

Да мне неважно платный это плагин или бесплатный. Возможно владельцы сайта его покупали. Мне всё равно. Я его туда не ставил. Мне достался сайт на доделку. Вы чем-то можете помочь, кроме ссылки на Гугл?

Ссылка на сообщение
Поделиться на других сайтах
trianon14

trianon14 7

Опубликовано:
Опубликовано:
22 минуты назад, panovgor сказал:

Да мне неважно платный это плагин или бесплатный. Возможно владельцы сайта его покупали. Мне всё равно. Я его туда не ставил. Мне достался сайт на доделку. Вы чем-то можете помочь, кроме ссылки на Гугл?

Я уже объяснил вам - то что вы хотите невозможно реализовать стандартными средствами. Ваши оба слайдера работают на jQuery - а такой плагин может быть только один на странице. Чтобы заработал слайдер внутри слайдера нужно писать отдельный скрипт. Это как минимум.

Ссылка на сообщение
Поделиться на других сайтах
odys

odys 385

Опубликовано:
Опубликовано:
1 час назад, trianon14 сказал:

Я уже объяснил вам - то что вы хотите невозможно реализовать стандартными средствами. Ваши оба слайдера работают на jQuery - а такой плагин может быть только один на странице. Чтобы заработал слайдер внутри слайдера нужно писать отдельный скрипт. Это как минимум.

да окстись ты уже... С какого перепуга ты это в своей голове придумал?

 

2 часа назад, panovgor сказал:

кроме ссылки на Гугл?

я разве не помог? Я написал, что инициализировать нужно, т.е. сказать, чтобы твой carouFredSel (это слайдер так называется), понял, что блок с классом slider это слайдер, а не просто так. Читай документацию к слайдеру как его подключать, в интернете она есть.

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

Ссылка на сообщение
Поделиться на других сайтах
panovgor

panovgor 2

Опубликовано:
Опубликовано: (изменено) Автор
15 минут назад, odys сказал:

Я написал, что инициализировать нужно, т.е. сказать, чтобы твой carouFredSel (это слайдер так называется)

Это не тот скрипт. Мне нужно, чтобы горизонтальный слайдер slider.js стал первой страницей в вертикальном слайдере fsvs.js   Сейчас у меня два глючных варианта - если я подключаю slider.js то вертикальный отображает белые поля, а горизонтальный не работает вообще никак. Если убрать скрипт slider.js из кода, то у меня вертикальный работает, но горизонтальный отображает просто первую картинку статично. Явно конфликт скриптов. Вот в этом я и просил помочь.

Изменено пользователем panovgor
Ссылка на сообщение
Поделиться на других сайтах
trianon14

trianon14 7

Опубликовано:
Опубликовано:
25 минут назад, odys сказал:

да окстись ты уже... С какого перепуга ты это в своей голове придумал?

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

Ссылка на сообщение
Поделиться на других сайтах
trianon14

trianon14 7

Опубликовано:
Опубликовано:
1 час назад, panovgor сказал:

Сейчас у меня два глючных варианта

Кстати есть метод использования двух библиотек одновременно с заменой в скриптах, использующих одну из библиотек, - символов $ на jQuery. Если у вас разные библиотеки, то дело в вёрстке по-видимому.

Ссылка на сообщение
Поделиться на других сайтах
alex32

alex32 944

Опубликовано:
Опубликовано: (изменено)
11 минуту назад, trianon14 сказал:

Кстати есть метод использования двух библиотек одновременно с заменой в скриптах, использующих одну из библиотек, - символов $ на jQuery. Если у вас разные библиотеки, то дело в вёрстке по-видимому.

trianon14,  у вас принципы такие, бред писать?  Или просто нравится, от собственной невежественности, других такими же невеждами делать? Для начала, почитайте в этих ваших интернетах, что такое БИБЛИОТЕКА jQuery и ПЛАГИНЫ jQuery. Библиотека должна быть одна, да, а слайдеры - это плагины и количество их не имеет никакого значения. Хоть десять плагинов будет, это не значит, что надо десять библиотек подключать. Одной на всех хватит.

 

Изменено пользователем alex32
  • Поддерживаю 1
Ссылка на сообщение
Поделиться на других сайтах
trianon14

trianon14 7

Опубликовано:
Опубликовано: (изменено)
29 минут назад, alex32 сказал:

trianon14,  у вас принципы такие, бред писать?  Или просто нравится, от собственной невежественности, других такими же невеждами делать? Для начала, почитайте в этих ваших интернетах, что такое БИБЛИОТЕКА jQuery и ПЛАГИНЫ jQuery. Библиотека должна быть одна, да, а слайдеры - это плагины и количество их не имеет никакого значения. Хоть десять плагинов будет, это не значит, что надо десять библиотек подключать. Одной на всех хватит.

 

Вы вообще о чём? Я и писал об одной библиотеке и разных слайдерах. А если где и ошибся так чисто машинально. Вам больше нечем заняться с odys на пару, кроме как докапываться в 4 часа ночи до всякой ерунды? Займитесь делом каким-нибудь, если не можете помочь человеку)) 

Изменено пользователем trianon14
Ссылка на сообщение
Поделиться на других сайтах
alex32

alex32 944

Опубликовано:
Опубликовано: (изменено)
26 минут назад, trianon14 сказал:

Вам больше нечем заняться с odys на пару, кроме как докапываться в 4 часа ночи до всякой ерунды?

У меня 3 часа как рабочий день, это раз. А два:



 

6 часов назад, trianon14 сказал:

То что вы задумали реализовать невозможно. На странице может быть только один jQuery.



 

5 часов назад, trianon14 сказал:

Я уже объяснил вам - то что вы хотите невозможно реализовать стандартными средствами. Ваши оба слайдера работают на jQuery - а такой плагин может быть только один на странице.

это не мы с odys-ом писали :D


 

Изменено пользователем alex32
Ссылка на сообщение
Поделиться на других сайтах
panovgor

panovgor 2

Опубликовано:
Опубликовано: Автор
1 час назад, trianon14 сказал:

Кстати есть метод использования двух библиотек одновременно с заменой в скриптах, использующих одну из библиотек, - символов $ на jQuery. Если у вас разные библиотеки, то дело в вёрстке по-видимому.

Не уверен, но мне кажется вы усложняете. Вот у меня такой код горизонтального слайдера 

<section class="slider">
	        <div class="slider-content">

		<div class="slide sl2"><div><h2>Результативность</h2><p>Результаты исследований, выводы, рекомендации <br> направлены на решение конкретных задач Заказчика.</p><a href="#content" class="more" onclick="return anchorScroller(this)">Подробнее</a></div></div>
		<div class="slide sl3"><div><h2>Объективность</h2><p>Предоставление объективной информации  – <br>главный принцип нашей работы</p><a href="#content" class="more" onclick="return anchorScroller(this)">Подробнее</a></div></div>
		<div class="slide sl4"><div><h2>Конфиденциальность</h2><p>Мы гарантируем Клиентам полную конфиденциальность <br> информации, полученной в ходе исследования</p><a href="#content" class="more" onclick="return anchorScroller(this)">Подробнее</a></div></div>
	</div>
</section>

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

<div id="fsvs-body">
				<div class="slide">
				<div id="service">
	<h3 class="title1" data-animated="fadeInUp">Услуги</h3>
	<div class="cnt oh">
		<div class="col4" data-animated="fadeInLeft">
			<a href="http://supertest.eurodir.ru/main/1-post1.html"><img src="{THEME}/images/research.png" alt=""></a>
			<a href="http://supertest.eurodir.ru/main/1-post1.html"><h4>Маркетинговые исследования</h4></a>
			      		</div>
		<div class="col4" data-animated="fadeInLeft">
			<a href=""><img src="{THEME}/images/industry.png" alt=""></a>
			<a href=""><h4>Исследования промышленных рынков (B2b) </h4></a>
					</div>
				<div class="col4" data-animated="fadeInLeft">
			<a href="/"><img src="{THEME}/images/shopping.png" alt=""></a>
			<a href="/"><h4>Исследование потребительских рынков (B2c)</h4></a>
					</div>
				<div class="col4" data-animated="fadeInLeft">
			<a href=""><img src="{THEME}/images/politic.png" alt=""></a>
			<a href=""><h4>Социально-политические исследования</h4></a>
				</div>
				<div class="col4" data-animated="fadeInRight">
			<a href=""><img src="{THEME}/images/carclinic.png" alt=""></a>
			<a href=""><h4>Car clinic</h4></a>
			</div>
		
		<div class="col4" data-animated="fadeInRight">
			<a href=""><img src="{THEME}/images/razvedka.png" alt=""></a>
			<a href=""><h4>Конкурентная разведка</h4></a>
		</div>
		
		<div class="col4" data-animated="fadeInRight">
			<a href="/"><img src="{THEME}/images/seminar.png" alt=""></a>
			<a href="/"><h4>Инвестиционные проекты</h4></a>
		</div>
		
  
		<div class="col4" data-animated="fadeInRight">
			<a href=""><img src="{THEME}/images/branding.png" alt=""></a>
			<a href=""><h4>Брендинг</h4></a>
        </div>
		
		
		
</div>
<center><a class="button3 b-transparent" href="/services/">Все услуги</a></center>
</div>
				
	<div>
	</div>
	</div>
			

<div class="slide">
<div id="works">
<h3 class="title1" data-animated="fadeInUp">Новости</h3>
<br>
<center><div class="slider-block">
<ul id="foo2">
			{custom category="1" template="foto-slider" aviable="global" from="0" limit="10" cache="no"}
			</ul>
			<div class="clearfix"></div>
			<a id="prev2" class="prev2" href="#"></a>
			<a id="next2" class="next2" href="#"></a>
			<div style="clear: both;"></div>
			</div></center>
	</div>
	
				<div>
			</div>
	    </div>
			
			
			<div class="slide">
				
				<div id="customers">
	<h3 class="title1" data-animated="fadeInUp">Наши клиенты</h3>
	<br />
	<div class="cnt oh" data-animated="fadeInUp">
		                <div class="customer"><img src="{THEME}/images/partners/c4.png"/></div>
		                <div class="customer"><img src="{THEME}/images/partners/c4.png"/></div>
		                <div class="customer"><img src="{THEME}/images/partners/c4.png"/></div>
		<div class="customer"><img src="{THEME}/images/partners/c4.png"/></div>
		                <div class="customer"><img src="{THEME}/images/partners/c4.png"/></div>
		                <div class="customer"><img src="{THEME}/images/partners/c4.png"/></div>
				<div class="customer"><img src="{THEME}/images/partners/c4.png"/></div>
		                <div class="customer"><img src="{THEME}/images/partners/c4.png"/></div>
		                <div class="customer"><img src="{THEME}/images/partners/c4.png"/></div>
		<div class="customer"><img src="{THEME}/images/partners/c4.png"/></div>
		                <div class="customer"><img src="{THEME}/images/partners/c4.png"/></div>
		                <div class="customer"><img src="{THEME}/images/partners/c4.png"/></div>
				<div class="customer"><img src="{THEME}/images/partners/c4.png"/></div>
		                <div class="customer"><img src="{THEME}/images/partners/c4.png"/></div>
		                <div class="customer"><img src="{THEME}/images/partners/c4.png"/></div>
		<div class="customer"><img src="{THEME}/images/partners/c4.png"/></div>
		                <div class="customer"><img src="{THEME}/images/partners/c4.png"/></div>
		                <div class="customer"><img src="{THEME}/images/partners/c4.png"/></div>
				</div>
<center><a class="button3 b-transparent" href="http://grifon-expert.ru/#slide-4">Отзывы заказчиков</a></center>
				</div>

						
				<div>
			</div>
	    </div>
			
			
			
			<div class="slide">
				<div id="customers">
				<h3 class="title1" data-animated="fadeInUp">Отзывы заказчиков</h3>
<div class="cnt oh">
		{custom category="1" template="include/portf" aviable="main" from="0" limit="8" cache="no"}
	</div>
	<center><a class="button3 b-transparent" href="#">Все отзывы и благодарности</a></center>
	
			</div>
</div>

 

Ссылка на сообщение
Поделиться на других сайтах
alex32

alex32 944

Опубликовано:
Опубликовано:

Во-первых, для начала надо привести код в нормальный вид. это что за дивнаястрочка перед закрывающем </body> 

<script async type="text/javascript" src="<script src="/templates/Russian2/js/carbon.js"></script>" id="_carbonads_js"></script>

Во-вторых, я так и не нашел, в каком файле инициализируется slider.js
 

Ссылка на сообщение
Поделиться на других сайтах
panovgor

panovgor 2

Опубликовано:
Опубликовано: Автор
26 минут назад, alex32 сказал:

Во-первых, для начала надо привести код в нормальный вид. это что за дивнаястрочка перед закрывающем </body> 


<script async type="text/javascript" src="<script src="/templates/Russian2/js/carbon.js"></script>" id="_carbonads_js"></script>

Во-вторых, я так и не нашел, в каком файле инициализируется slider.js
 

Честно говоря вообще не знаю, что делает этот файл. Этот кусок кода был до меня и вот так был криво написан. Что касается инициализации слайдера, то вот сейчас я удалил вертикальный слайдер и работает горизонтальный. Видимо если он работает, то где-то и инициализируется. Тут тоже я оперирую тем что есть. Я эти плагины не ставил. Файлы горизонтального слайдера  

<script src="{THEME}/js/anchorscroller.js"></script>
<script src="{THEME}/js/slider.js"></script>

Ссылка на сообщение
Поделиться на других сайтах
alex32

alex32 944

Опубликовано:
Опубликовано:

в обоих слайдерах зайдествован класс .slide. Надо в одном каком то поменять, как в html, так и в css и в js
 

  • Поддерживаю 1
Ссылка на сообщение
Поделиться на других сайтах
panovgor

panovgor 2

Опубликовано:
Опубликовано: (изменено) Автор
33 минуты назад, alex32 сказал:

в обоих слайдерах зайдествован класс .slide. Надо в одном каком то поменять, как в html, так и в css и в js
 

Точно. Спасибо. Единственное, всё криво пока, не видны кнопки горизонтального слайдера, но видимо там ещё косяков куча. И почему-то горизонтальный слайдер не только установленные 4 слайда воспроизводит, а по прежнему после них какие-то белые поля. И вроде нет кругового цикла. Это что может быть? И ещё вопрос - вот такой код горизонтального слайдера корректен? Там <section> после <div>. Может из-за этого кривизна? 

<div class="slide">
	<section class="slider">
	        <div class="slider-content">
        <div class="slide2 sl1"><div><h2>Эксклюзивность</h2><p>Индивидуальный и профессиональный <br> подход к каждому клиенту</p><a href="#content" class="more" onclick="return anchorScroller(this)">Подробнее</a></div></div>
		<div class="slide2 sl2"><div><h2>Результативность</h2><p>Результаты исследований, выводы, рекомендации <br> направлены на решение конкретных задач Заказчика.</p><a href="#content" class="more" onclick="return anchorScroller(this)">Подробнее</a></div></div>
		<div class="slide2 sl3"><div><h2>Объективность</h2><p>Предоставление объективной информации  – <br>главный принцип нашей работы</p><a href="#content" class="more" onclick="return anchorScroller(this)">Подробнее</a></div></div>
		<div class="slide2 sl4"><div><h2>Конфиденциальность</h2><p>Мы гарантируем Клиентам полную конфиденциальность <br> информации, полученной в ходе исследования</p><a href="#content" class="more" onclick="return anchorScroller(this)">Подробнее</a></div></div>
	</div>
</section>	
	<div>
	</div>
	</div>

 

Изменено пользователем panovgor
Ссылка на сообщение
Поделиться на других сайтах
alex32

alex32 944

Опубликовано:
Опубликовано:

 не знаю, вряд ли из за секции, скорее из-за безобразно кривойж...й  верстки в целом. На главной странице явные незакрытые теги присутствуют, про эту сказку 

<script async type="text/javascript" src="<script src="/templates/Russian2/js/carbon.js"></script>" id="_carbonads_js"></script>

 я вообще молчу. Смотреть верстку надо внимательно, закрывать теги, смотреть стили.
 

а навигации нет, потому что в файле slide.js 

slideCount = $(".slide2r-content .slide2").size();


 

 

а на сайте такого блока нет , есть  <div class="slider-content">

 


 

Ссылка на сообщение
Поделиться на других сайтах
panovgor

panovgor 2

Опубликовано:
Опубликовано: (изменено) Автор
16 минут назад, alex32 сказал:

 не знаю, вряд ли из за секции, скорее из-за безобразно кривойж...й  верстки в целом. На главной странице явные незакрытые теги присутствуют, про эту сказку 


<script async type="text/javascript" src="<script src="/templates/Russian2/js/carbon.js"></script>" id="_carbonads_js"></script>

 я вообще молчу. Смотреть верстку надо внимательно, закрывать теги, смотреть стили.
 

С carbon.js вообще непонятно что это. И с белыми полями непонятно пока где искать ошибку.

 

Изменено пользователем panovgor
Ссылка на сообщение
Поделиться на других сайтах
alex32

alex32 944

Опубликовано:
Опубликовано:
14 минуты назад, panovgor сказал:

С carbon.js вообще непонятно что это

ну так удалить надо, все-равно в таком виде это не работает
 

Ссылка на сообщение
Поделиться на других сайтах
panovgor

panovgor 2

Опубликовано:
Опубликовано: Автор

Спасибо всем кто помог. У меня ещё один вопрос есть. Оба мои слайдера на 100% экрана и текст на слайдах по центру. Так было до "скрещивания". После объединения горизонтальный слайдер вроде работает в норме, а содержимое вертикального слайдера ушло вверх.(фоны вроде на месте). В css ничего не трогал, это случилось просто после их интеграции. Я пытался вот в этом коде центрировать, но не выходит. Что нужно сделать для центровки? 

html.demo.fsvs #fsvs-body > .slide {
	    padding: 0; text-align: center;
}

 

Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Рассказать
Подписчики 0
Перейти к списку тем
×
×
  • Создать...