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


Слайдер На Главной

слайдер

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

#1 magiya1984

magiya1984

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

  • Пользователи
  • PipPipPipPip
  • 439 сообщений
  • ГородМосква

Отправлено 06 Октябрь 2016 - 13:54

Всем привет!! Подскажите возможно ли организовать что-то вроде слайдера но чтобы листался только текстовой блок с кнопкой.
Заранее спасибо!! Аккаунт SL-386399

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

  • 5.jpg


#2 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 06 Октябрь 2016 - 17:34

Просмотр сообщенияmagiya1984 (06 Октябрь 2016 - 13:54) писал:

Всем привет!! Подскажите возможно ли организовать что-то вроде слайдера но чтобы листался только текстовой блок с кнопкой.
Заранее спасибо!! Аккаунт SL-386399
Здравствуйте, найдите в шаблоне HTML
<!-- Скрипты для главной -->
  {% IF index_page %}
 
  <script>
	// Запуск основных скриптов для главной страницы
	$(function(){ indexPage(); });
	<!-- Модальное окно уведомления при отправке сообщения -->
замените на

<!-- Скрипты для главной -->
  {% IF index_page %}
  <link rel="stylesheet" href="{ASSETS_STYLES_PATH}flexslider.css" type="text/css" />
  <script type="text/javascript" src="{ASSETS_JS_PATH}jquery.flexslider.js"></script>
  <script>
	// Запуск основных скриптов для главной страницы
	$(function(){ indexPage(); });
	$(window).load(function() {
  $('.flexslider').flexslider({
	animation: "slide"
  });
});
	<!-- Модальное окно уведомления при отправке сообщения -->

далее найдите
<div class="text">
		<div class="title">Интернет магазин постельного белья</div>
		<a href="http://bellmarket.website/catalog" class="button big">Перейти в каталог</a>
	  </div>

замените на
<div class="text">
		<div class="flexslider">
  <ul class="slides">
	<li>
		<div class="title">Интернет магазин постельного белья</div>
		<a href="http://bellmarket.website/catalog" class="button big">Перейти в каталог</a>
		 </li>
		 <li>новый слайдер</li>
  </ul>
</div>
	  </div>

Все необходимые скрипты и стили Вам загрузили на сайт.

#3 magiya1984

magiya1984

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

  • Пользователи
  • PipPipPipPip
  • 439 сообщений
  • ГородМосква

Отправлено 06 Октябрь 2016 - 17:41

чё-то криво встало, сделал бекап, не посмотрел число, исходники слетели не могли бы кинуть их ещё раз прошу прощения

#4 Danil

Danil

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

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

Отправлено 06 Октябрь 2016 - 20:38

Просмотр сообщенияmagiya1984 (06 Октябрь 2016 - 17:41) писал:

чё-то криво встало, сделал бекап, не посмотрел число, исходники слетели не могли бы кинуть их ещё раз прошу прощения
Здравствуйте.
Все исходники нужно загрузить из инструкции в FAQ.
Далее произведите изменения из инструкции в сообщении 2, чтобы мы могли проверить наличие ошибки и исправить ее.

#5 magiya1984

magiya1984

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

  • Пользователи
  • PipPipPipPip
  • 439 сообщений
  • ГородМосква

Отправлено 06 Октябрь 2016 - 20:39

ок

#6 magiya1984

magiya1984

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

  • Пользователи
  • PipPipPipPip
  • 439 сообщений
  • ГородМосква

Отправлено 06 Октябрь 2016 - 20:50

Просмотр сообщенияDanil (06 Октябрь 2016 - 20:38) писал:

Здравствуйте.
Все исходники нужно загрузить из инструкции в FAQ.
Далее произведите изменения из инструкции в сообщении 2, чтобы мы могли проверить наличие ошибки и исправить ее.
Закачал файлы css и js далее сделал по инструкции теперь слайдер не грузится

мне надо чтобы двигался только текстовой блок как показано в первом сообщении

#7 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 07 Октябрь 2016 - 02:05

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

В необходимом месте HTML или другого шаблона разместите:
<div id="slide_content" class="main-block animated" data-animation="fadeInUp" data-delay="0">
	 <div class="container">
	 <h2 class="title">Слайдер текста</h2>
	 <div class="navigation">
		 <a href="#" class="prev"><i class="fa fa-angle-left"></i></a>
		 <a href="#" class="next"><i class="fa fa-angle-right"></i></a>
	 </div>
	 <div class="slide_block">
			 <div class="item">
			 <div class="content">
				 Текст 1
			 </div>
			 </div>
			 <div class="item">
			 <div class="content">
				 Текст 2
			 </div>
			 </div>
			 <div class="item">
			 <div class="content">
				 Текст 3
			 </div>
			 </div>
	 </div>
	 </div>
</div>

текст и заголовок замените на необходимое(кроме текста можно вставлять ссылки, картинки и прочее).

В main.js найдите:
// Новости на главной
jQuery(function($) {
var carouselU = $('#news .block-news');
carouselU.owlCarousel({
	 singleItem: true,
	 lazyLoad: true,
	 pagination: false,
	 navigation: true,
	 itemsScaleUp: true,
	 slideSpeed: 800,
	 stopOnHover: true,
	 touchDrag: true,
	 autoPlay: false,
	 addClassActive: true,
	 autoHeight: true,
	 afterAction: function (e) {
	 if(this.$owlItems.length > this.options.items){
		 $('.related-goods .navigation a').show();
	 }else{
		 $('.related-goods .navigation a').hide();
	 }
	 }
});
jQuery('#news .navigation .prev').on('click', function(e){
e.preventDefault();
carouselU.trigger('owl.prev');
});
jQuery('#news .navigation .next').on('click', function(e){
e.preventDefault();
carouselU.trigger('owl.next');
});
});

после него пропишите:
// Слайдер текста
jQuery(function($) {
var carouselU = $('#slide_content .slide_block');
carouselU.owlCarousel({
	 singleItem: true,
	 lazyLoad: true,
	 pagination: false,
	 navigation: true,
	 itemsScaleUp: true,
	 slideSpeed: 800,
	 stopOnHover: true,
	 touchDrag: true,
	 autoPlay: false,
	 addClassActive: true,
	 autoHeight: true
});
jQuery('#slide_content .navigation .prev').on('click', function(e){
e.preventDefault();
carouselU.trigger('owl.prev');
});
jQuery('#slide_content .navigation .next').on('click', function(e){
e.preventDefault();
carouselU.trigger('owl.next');
});
});

В main.css найдите:
#news .navigation {display: none;}
#news .owl-buttons .owl-prev, #news .owl-buttons .owl-next {position: absolute;cursor: pointer;display: block;width: 30px;height: 55px;top: 25%;text-indent: -999px;background: url('{ASSETS_IMAGES_PATH}arrow.png?design=eclipse') center no-repeat;overflow: hidden;}
#news .owl-buttons .owl-prev { background-position: -15px -33px;float: left;left: 15px;}
#news .owl-buttons .owl-next { background-position: -75px -33px;float: right;right: 15px;}

замените на:
#news .navigation, #slide_content .navigation{display: none;}
#news .owl-buttons .owl-prev, #news .owl-buttons .owl-next, #slide_content .owl-buttons .owl-prev, #slide_content .owl-buttons .owl-next {position: absolute;cursor: pointer;display: block;width: 30px;height: 55px;top: 25%;text-indent: -999px;background: url('{ASSETS_IMAGES_PATH}arrow.png?design=eclipse') center no-repeat;overflow: hidden;}
#news .owl-buttons .owl-prev, #slide_content .owl-buttons .owl-prev { background-position: -15px -33px;float: left;left: 15px;}
#news .owl-buttons .owl-next, #slide_content .owl-buttons .owl-next { background-position: -75px -33px;float: right;right: 15px;}

Результат:
321.jpg

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

#8 magiya1984

magiya1984

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

  • Пользователи
  • PipPipPipPip
  • 439 сообщений
  • ГородМосква

Отправлено 07 Октябрь 2016 - 10:00

да есть но он для новостей этот блок хочу задействовать для показа отдельных категорий.

#9 magiya1984

magiya1984

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

  • Пользователи
  • PipPipPipPip
  • 439 сообщений
  • ГородМосква

Отправлено 07 Октябрь 2016 - 10:11

Вы меня немного не поняли, да ладно ...

#10 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 07 Октябрь 2016 - 11:20

Инструкция выше не затрагивает новостной блок, так же в ваших сообщениях выше ничего не говорится про категории. Вместо текста вы можете вводить как вручную введенную информацию или же те же категории или товары.

#11 magiya1984

magiya1984

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

  • Пользователи
  • PipPipPipPip
  • 439 сообщений
  • ГородМосква

Отправлено 07 Октябрь 2016 - 11:48

Давайте с начала :)

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

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

  • 5.jpg


#12 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 07 Октябрь 2016 - 12:16

Инструкция:
http://forum.storela...ой/#entry249632

Поможет реализовать данную задачу, в инструкции используется "Текст 1", "Текст 2" и так далее, вместо него просто подставляем необходимую информацию(текст, картинки, ссылки) с кнопкой =)

Где вы его хотите разместить?

#13 magiya1984

magiya1984

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

  • Пользователи
  • PipPipPipPip
  • 439 сообщений
  • ГородМосква

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

в слайдере

не то это всё Ирина 345 знает она делала уже.

#14 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 07 Октябрь 2016 - 15:05

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

в слайдере

не то это всё Ирина 345 знает она делала уже.
Здравствуйте, Вам внесли необходимые файлы для слайдера и создали бекап, выполните инструкцию из сообщения 2 данной темы и слайдер отобразится на главной, далее подробнее опишите, что именно необходимо изменить в слайдере.

#15 magiya1984

magiya1984

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

  • Пользователи
  • PipPipPipPip
  • 439 сообщений
  • ГородМосква

Отправлено 07 Октябрь 2016 - 15:28

Да спасибо я уже разобрался сам. Единственное подскажите как сделать что бы при на видение стрелки не так быстро исчезали (а то их не поймать)

#16 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 07 Октябрь 2016 - 15:40

Просмотр сообщенияmagiya1984 (07 Октябрь 2016 - 15:28) писал:

Да спасибо я уже разобрался сам. Единственное подскажите как сделать что бы при на видение стрелки не так быстро исчезали (а то их не поймать)
Найдите в файле flexslider.css
.flex-direction-nav a {
  text-decoration: none;
  display: block;
  width: 40px;
  height: 60px;
  margin: -20px -110px 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: 112px;
  height: 60px;
  margin: -20px -110px 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;
}

далее найдите в шаблоне HTML
$('.flexslider').flexslider({
		animation: "slide"
  });

замените на
$('.flexslider').flexslider({
		animation: "slide",
		prevText: "",
nextText: ""
  });


#17 magiya1984

magiya1984

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

  • Пользователи
  • PipPipPipPip
  • 439 сообщений
  • ГородМосква

Отправлено 07 Октябрь 2016 - 15:50

шикарно. спасибо.





Темы с аналогичным тегами слайдер

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

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