Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

Как Установить Слайдер На Главной Странице Магазина?

Автор Mrbessonov , 16 февр. 2013 17:29

слайдер

Вперед

Авторизуйтесь для ответа в теме

Сообщений в теме: 35

#1 Mrbessonov

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

Пользователи
269 сообщений

ГородКемерово

Отправлено 16 Февраль 2013 - 17:29

Увидел тему в FAQ и не понял одно слово "Скролим"
Что означает это слово,я не понимаю жаргон программистов,могли бы расшифровать?

Наверх

#2 Mrbessonov

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

Пользователи
269 сообщений

ГородКемерово

Отправлено 16 Февраль 2013 - 17:39

Хотя,я уж на мейл.ру спросил.Можно не отвечать.

Наверх

#3 support 2.0

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

Модераторы
4 950 сообщений

Отправлено 16 Февраль 2013 - 18:20

Mrbessonov (16 Февраль 2013 - 17:29) писал:

"скролим" - крутим колесиком мышки вниз

Наверх

#4 ais-83

Продвинутый пользователь

Пользователи
165 сообщений

Отправлено 15 Март 2013 - 16:41

ХЕЛП!!!
Добрый вечер. Пытаюсь установить слайдер BXSLIDER.

1)скачала архив с плагином, распаковала, скопировала в файлы сайта некоторые файлы (по аналогии с nyvo).
2) в "хтмл" после "скрипты магазина" добавила код:

<script src="http://code.jquery.c...uery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider1').bxSlider();
  });
</script>

3) в "страницы" после "строка пути" ДОБАВИЛА:

<ul class="bxslider">
      <li><img src="http://files.storela...7/466882/1.jpg" alt="/></li>

      <li><img src="http://files.storela...7/466902/2.jpg" alt="/></li>
      <li><img src="http://files.storela...netteFleur.jpg" alt="/></li>
      <li><img src="http://files.storela...7/466882/1.jpg" alt="/></li>
</ul>

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

Наверх

#5 support 2.0

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

Модераторы
4 950 сообщений

Отправлено 15 Март 2013 - 18:26

ais-83 (15 Март 2013 - 16:41) писал:

ХЕЛП!!!
Добрый вечер. Пытаюсь установить слайдер BXSLIDER.

1)скачала архив с плагином, распаковала, скопировала в файлы сайта некоторые файлы (по аналогии с nyvo).
2) в "хтмл" после "скрипты магазина" добавила код:

<script src="http://code.jquery.c...uery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
$('#slider1').bxSlider();
  });
</script>

3) в "страницы" после "строка пути" ДОБАВИЛА:

<ul class="bxslider">
  <li><img src="http://files.storela...7/466882/1.jpg" alt="/></li>

  <li><img src="http://files.storela...7/466902/2.jpg" alt="/></li>
  <li><img src="http://files.storela...netteFleur.jpg" alt="/></li>
  <li><img src="http://files.storela...7/466882/1.jpg" alt="/></li>
</ul>

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

вместо

<script src="jquery.bxSlider.min.js" type="text/javascript"></script>

нужно вставить

<script src="{ASSETS_IMAGES_PATH}jquery.bxSlider.min.js" type="text/javascript"></script>

Наверх

#6 ais-83

Продвинутый пользователь

Пользователи
165 сообщений

Отправлено 16 Март 2013 - 08:47

support 2.0 (15 Март 2013 - 18:26) писал:

вместо

<script src="jquery.bxSlider.min.js" type="text/javascript"></script>

нужно вставить

<script src="{ASSETS_IMAGES_PATH}jquery.bxSlider.min.js" type="text/javascript"></script>

хм, ничего не изменилось(...

Наверх

#7 miyako

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

Модератоpы
5 372 сообщений

Отправлено 16 Март 2013 - 08:54

ais-83 (16 Март 2013 - 08:47) писал:

хм, ничего не изменилось(...

Слайдер на главной странице у вас работает корректно. Объясните еще раз что у вас отображается сейчас не так.

Наверх

#8 ais-83

Продвинутый пользователь

Пользователи
165 сообщений

Отправлено 16 Март 2013 - 09:01

miyako (16 Март 2013 - 08:54) писал:

Слайдер на главной странице у вас работает корректно. Объясните еще раз что у вас отображается сейчас не так.

аккаунт 185759. возможно вы смотрите на другой сайт...

Наверх

#9 miyako

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

Модератоpы
5 372 сообщений

Отправлено 16 Март 2013 - 10:12

ais-83 (16 Март 2013 - 09:01) писал:

аккаунт 185759. возможно вы смотрите на другой сайт...

Пришлите пожалуйста код слайдера из шаблона HTML

Наверх

#10 ais-83

Продвинутый пользователь

Пользователи
165 сообщений

Отправлено 16 Март 2013 - 10:18

miyako (16 Март 2013 - 10:12) писал:

Пришлите пожалуйста код слайдера из шаблона HTML

Наверх

#11 Koderhan

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

Модератоpы
6 227 сообщений

Отправлено 16 Март 2013 - 10:26

В коде слайдера нужно заменить код:

<script type="text/javascript">
  $(document).ready(function(){
	$('#slider1').bxSlider();
  });
</script>

На код:

<script type="text/javascript">
  $(document).ready(function(){
	$('.bxslider').bxSlider();
  });
</script>

Наверх

#12 ais-83

Продвинутый пользователь

Пользователи
165 сообщений

Отправлено 16 Март 2013 - 10:49

Koderhan (16 Март 2013 - 10:26) писал:

В коде слайдера нужно заменить код:

<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider();
});
</script>

На код:

<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>

не помогло...
стайдер вообще пропал, и интересные предложения частично встали на его место...

Наверх

#13 Koderhan

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

Модератоpы
6 227 сообщений

Отправлено 16 Март 2013 - 11:08

Почему вам не подходит слайдер из этой инструкции ?
http://storeland.ru/about/faq#51
На каком сайте вы нашли инструкцию по установке слайдера bxSlider. ?

Наверх

#14 miyako

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

Модератоpы
5 372 сообщений

Отправлено 16 Март 2013 - 11:10

ais-83 (16 Март 2013 - 10:49) писал:

не помогло...
стайдер вообще пропал, и интересные предложения частично встали на его место...

Вы можете дать ссылку по какой инструкции вы вставляли этот слайдер? То есть где взяли исходники?

Наверх

#15 ais-83

Продвинутый пользователь

Пользователи
165 сообщений

Отправлено 16 Март 2013 - 11:32

miyako (16 Март 2013 - 11:10) писал:

Вы можете дать ссылку по какой инструкции вы вставляли этот слайдер? То есть где взяли исходники?

пробовала делать как в этих местах

http://dnzl.ru/view_post.php?id=222

http://slaffko.name/...w-bxslider.html

Наверх

#16 miyako

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

Модератоpы
5 372 сообщений

Отправлено 16 Март 2013 - 12:06

ais-83 (16 Март 2013 - 11:32) писал:

пробовала делать как в этих местах

http://dnzl.ru/view_post.php?id=222

http://slaffko.name/...w-bxslider.html

Инструкция по установке:
1) Загружаем файлы - изображения из папки bx_styles, скрипты

2) Подключаем скрипт в шаблоне HTML в <head>, то есть у вас должно быть так:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
</script>
<script src="{ASSETS_JS_PATH}jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
	$('#slider1').bxSlider();
  });
</script>

  <!-- Скрипты магазина -->
  <script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
</head>

3) Вставляем код в шаблон HTML (код слайдера):

			  {% IF index_page %}
<div id="slider1">
  <div>Slide one content</div>
  <div>Slide two content</div>
  <div>Slide three content</div>
  <div>And so on...</div>
</div>

4) Вставляем такой код в main.css:

.bx-next {
  position:absolute;
top:40%;
right:-50px;
z-index:999;
width: 30px;
height: 30px;
text-indent: -999999px;
background: url({ASSETS_IMAGES_PATH}blue_next.png) no-repeat 0 -30px;
}
/*previous button*/
.bx-prev {
position:absolute;
top:40%;
left:-50px;
z-index:999;
width: 30px;
height: 30px;
text-indent: -999999px;
background: url({ASSETS_IMAGES_PATH}blue_prev.png) no-repeat 0 -30px;
}
/*pager links*/
.bx-pager a {
margin-right: 5px;
color: #fff;
padding: 3px 8px 3px 6px;
font-size: 12px;
zoom:1;
background: url({ASSETS_IMAGES_PATH}blue_pager.png) no-repeat 0 -20px;
}
/*auto start button*/
.bx-auto .start {
background: url({ASSETS_IMAGES_PATH}blue_auto.png) no-repeat 0 2px;
padding-left: 13px;
}
/*auto stop button*/
.bx-auto .stop {
background: url({ASSETS_IMAGES_PATH}blue_auto.png) no-repeat 0 -14px;
padding-left: 13px;
}
/*
* End color scheme styles
*/

/*next/prev button hover state*/
.bx-next:hover,
.bx-prev:hover {
background-position: 0 0;
}
/*pager links hover and active states*/
.bx-pager .pager-active,
.bx-pager a:hover {
background-position: 0 0;
}
/*pager wrapper*/
.bx-pager {
text-align:center;
padding-top: 7px;
font-size:12px;
color:#666;
}
/*captions*/
.bx-captions {
text-align:center;
font-size: 12px;
padding: 7px 0;
color: #666;
}
/*auto controls*/
.bx-auto {
text-align: center;
padding-top: 15px;
}
.bx-auto a {
color: #666;
font-size: 12px;
}

Наверх

#17 ais-83

Продвинутый пользователь

Пользователи
165 сообщений

Отправлено 16 Март 2013 - 12:25

miyako (16 Март 2013 - 12:06) писал:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
</script>
<script src="{ASSETS_JS_PATH}jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider();
});
</script>

<!-- Скрипты магазина -->
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
</head>

3) Вставляем код в шаблон HTML (код слайдера):

			 {% IF index_page %}
<div id="slider1">
<div>Slide one content</div>
<div>Slide two content</div>
<div>Slide three content</div>
<div>And so on...</div>
</div>

4) Вставляем такой код в main.css:

.bx-next {
position:absolute;
top:40%;
right:-50px;
z-index:999;
width: 30px;
height: 30px;
text-indent: -999999px;
background: url({ASSETS_IMAGES_PATH}blue_next.png) no-repeat 0 -30px;
}
/*previous button*/
.bx-prev {
position:absolute;
top:40%;
left:-50px;
z-index:999;
width: 30px;
height: 30px;
text-indent: -999999px;
background: url({ASSETS_IMAGES_PATH}blue_prev.png) no-repeat 0 -30px;
}
/*pager links*/
.bx-pager a {
margin-right: 5px;
color: #fff;
padding: 3px 8px 3px 6px;
font-size: 12px;
zoom:1;
background: url({ASSETS_IMAGES_PATH}blue_pager.png) no-repeat 0 -20px;
}
/*auto start button*/
.bx-auto .start {
background: url({ASSETS_IMAGES_PATH}blue_auto.png) no-repeat 0 2px;
padding-left: 13px;
}
/*auto stop button*/
.bx-auto .stop {
background: url({ASSETS_IMAGES_PATH}blue_auto.png) no-repeat 0 -14px;
padding-left: 13px;
}
/*
* End color scheme styles
*/

/*next/prev button hover state*/
.bx-next:hover,
.bx-prev:hover {
background-position: 0 0;
}
/*pager links hover and active states*/
.bx-pager .pager-active,
.bx-pager a:hover {
background-position: 0 0;
}
/*pager wrapper*/
.bx-pager {
text-align:center;
padding-top: 7px;
font-size:12px;
color:#666;
}
/*captions*/
.bx-captions {
text-align:center;
font-size: 12px;
padding: 7px 0;
color: #666;
}
/*auto controls*/
.bx-auto {
text-align: center;
padding-top: 15px;
}
.bx-auto a {
color: #666;
font-size: 12px;
}

прошу прощения, куда нужно вставить код под пунктом 3, и у меня там высвечивается ошибка, что не закрыта верхняя строка... что нужно поменять?

Наверх

#18 ais-83

Продвинутый пользователь

Пользователи
165 сообщений

Отправлено 16 Март 2013 - 15:48

ais-83 (16 Март 2013 - 12:25) писал:

закрыла строку первую из 3 пункта так:{% ENDIF %}, все равно нет нужного результата. добавила как вы сказали все, а 3 пункт сделала так: {% IF index_page %} {% ENDIF %}
<div id="bxslider">
<img src="http://files.storela...882/1.jpg"alt"" />
<img src="http://files.storela...02/2.jpg"alt="" />
<img src="http://files.storela...leur.jpg"alt="" />
</div>

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

Наверх

#19 ais-83

Продвинутый пользователь

Пользователи
165 сообщений

Отправлено 16 Март 2013 - 15:56

ais-83 (16 Март 2013 - 15:48) писал:

и подскажите, точно ли нужно вставлять 4пункт а main css, этот код есть в закаченном файле bx_styles.css

Наверх

#20 support 2.0

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

Модераторы
4 950 сообщений

Отправлено 16 Март 2013 - 17:41

ais-83 (16 Март 2013 - 12:25) писал:

вместо того кода поставьте

{% IF index_page %}
<div id="slider1">
  <div>Slide one content</div>
  <div>Slide two content</div>
  <div>Slide three content</div>
  <div>And so on...</div>
</div>
{% ENDIF %}

ais-83 (16 Март 2013 - 15:56) писал:

и подскажите, точно ли нужно вставлять 4пункт а main css, этот код есть в закаченном файле bx_styles.css

Если там точно такие же блоки с таким же содержанием, то конечно в main.css уже его не нужно будет вставлять

Наверх

Вперед

Обратно в Общие вопросы

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

Вопросы работы сервиса StoreLand → Дизайн → Шаблон Сказка → Главная → Убираем Цветной Баннер На Слайдере Автор Гость_Foxis_10_* , 17 февр. 2021 слайдер	0 Ответов 718 Просмотров	Foxis_10 17 февр. 2021
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Нептун → Главная → Изменение Главного Баннера На Слайдер Автор Гость_Firefly_* , 04 дек. 2019 Нептун, Слайдер, owl-slider	2 Ответов 1 489 Просмотров	Firefly 02 июня 2020
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Сканди → Изменение общей стилистики → Изменение Слайдера Автор Гость_TYURIKOFF_* , 21 марта 2019 слайдер	7 Ответов 1 946 Просмотров	Юлия_Scandidec 21 апр. 2020
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Лето → Изменение общей стилистики → Настройка Слайдера Автор Гость_tovmarket_* , 30 окт. 2018 слайдер	4 Ответов 2 003 Просмотров	tovmarket 01 нояб. 2018
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Рассвет → Как Изменить Расположение Объектов На Первом Экране Автор Гость_DMC_* , 19 окт. 2018 шапка, слайдер, логотип	1 Ответ 2 359 Просмотров	Vaccina 26 окт. 2018