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


Как Сделать Больше Слайдов . Пару Вопросов


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

#1 tank2612

tank2612

    Пользователь

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

Отправлено 09 Февраль 2015 - 04:50

Привет. Вот мой сайт http://bigbag.storeland.ru/
на нем есть слайды на главной страницы
Изображение
вот они .
Их всего 3 штуки.
Слайд 1-2-3 Изображение


ВОПРОС . Как мне добавить 4 и 5 и 6 и тд... слайды ????
Ещё ВОПРОС.
_____________________
У меня есть стрелочки на сайте переключения слайдов по бокам. Как мне добавить такие вот точечки переключения слайдов как показано на скриншоте ??
Изображение

#2 Alekseys

Alekseys

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

  • Модераторы
  • 2 355 сообщений

Отправлено 09 Февраль 2015 - 09:51

Просмотр сообщенияtank2612 (09 Февраль 2015 - 04:50) писал:

Привет. Вот мой сайт http://bigbag.storeland.ru/
на нем есть слайды на главной страницы
вот они .
Их всего 3 штуки.
Слайд 1-2-3
ВОПРОС . Как мне добавить 4 и 5 и 6 и тд... слайды ????
Ещё ВОПРОС.
_____________________
У меня есть стрелочки на сайте переключения слайдов по бокам. Как мне добавить такие вот точечки переключения слайдов как показано на скриншоте ??
Здравствуйте. Уточните пожалуйста номер Вашего аккаунта.

#3 tank2612

tank2612

    Пользователь

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

Отправлено 09 Февраль 2015 - 10:55

SL-332006

#4 Alekseys

Alekseys

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

  • Модераторы
  • 2 355 сообщений

Отправлено 09 Февраль 2015 - 11:11

Просмотр сообщенияtank2612 (09 Февраль 2015 - 10:55) писал:

SL-332006
В шаблоне HTML после
<li>
				  <div class="bigPic" style="width: 1920px; height: 550px; background:url({ASSETS_IMAGES_PATH}slide3.png?design=spring) no-repeat;"></div>
				  <img src="{ASSETS_IMAGES_PATH}slide3.png?design=spring" alt="Slide 3" class="slide_img">
				</li>
добавьте нужное количество аналогичных блоков(по количеству картинок) , меняя slider3.png на нужное название изображений.

#5 tank2612

tank2612

    Пользователь

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

Отправлено 09 Февраль 2015 - 11:18

Хорош спасибо понял)) Но вы так и не ответили на следующий вопрос . Как мне сделать специальные точечки на слайдах для их переключения.
Ещё вопрос тут.
Стандартный слайд имеет разрешение 1920 на 550
я сделал свой где разрешение меньше но Он стал больше и растянулся. Как быть ? Вот скриншот сравнение 2-ух
Мой меньше но он стал больше Почему ? Как мне сделать стандартно его ?
Изображение
Изображение

#6 Alekseys

Alekseys

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

  • Модераторы
  • 2 355 сообщений

Отправлено 09 Февраль 2015 - 11:22

Просмотр сообщенияtank2612 (09 Февраль 2015 - 11:18) писал:

Хорош спасибо понял)) Но вы так и не ответили на следующий вопрос . Как мне сделать специальные точечки на слайдах для их переключения.
Ещё вопрос тут.
Стандартный слайд имеет разрешение 1920 на 550
я сделал свой где разрешение меньше но Он стал больше и растянулся. Как быть ? Вот скриншот сравнение 2-ух
Мой меньше но он стал больше Почему ? Как мне сделать стандартно его ?
Для перелистывания точками Вам нужен другой слайдер. Ваш слайд стал больше по причине того, что размер слайдера регулируется в стилях, а не размером загружаемых изображений.

#7 tank2612

tank2612

    Пользователь

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

Отправлено 09 Февраль 2015 - 11:28

Подскажите у меня ещё вопрос. У меня есть тут задумка. Объясню так
Изображение

_______________________________________________________________________________
1. Слева есть синяя рамка ( циферка 2) - в ней будут слайды от 5- до 7 штук. С гиперссылками , по которой можно переходить на страницу. . В ней есть точки , где можно переключать слайды. В ней есть Подобные стрелочки. Обозначенные в красных кружках.
2. Под циферками 3 , 4 , 5 будут картинки , кликая по ним переходя на определенные страницу ( гиперссылки )

Как мне это реализовать ?
Я расчитываю , Все эти 4 плитки , которые будут разделены друг от друга расстоянием  совсем небольшим зазорчиком. Также расчитываю , что  размер всего будет исходить от этой полной картинки 1920х550 разрешения , которая представлена. Т.е.  Вот как я разделил В точности по размерам так и должно быть
Спасибо если объясните как сделать

#8 Alekseys

Alekseys

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

  • Модераторы
  • 2 355 сообщений

Отправлено 09 Февраль 2015 - 12:14

Просмотр сообщенияtank2612 (09 Февраль 2015 - 11:28) писал:

Подскажите у меня ещё вопрос. У меня есть тут задумка. Объясню так
1. Слева есть синяя рамка ( циферка 2) - в ней будут слайды от 5- до 7 штук. С гиперссылками , по которой можно переходить на страницу. . В ней есть точки , где можно переключать слайды. В ней есть Подобные стрелочки. Обозначенные в красных кружках.
2. Под циферками 3 , 4 , 5 будут картинки , кликая по ним переходя на определенные страницу ( гиперссылки )

Как мне это реализовать ?
Я расчитываю , Все эти 4 плитки , которые будут разделены друг от друга расстоянием  совсем небольшим зазорчиком. Также расчитываю , что  размер всего будет исходить от этой полной картинки 1920х550 разрешения , которая представлена. Т.е.  Вот как я разделил В точности по размерам так и должно быть
Спасибо если объясните как сделать
В main.css замените
#module_area {
width: 100%;
text-align: center;
padding: 5px 0;
}
на
#module_area {
width: 50%;
height: 550px;
text-align: center;
padding: 5px 0;
float: left;
}
и
#header .flexslider {
width: 100%;
margin: 0 auto !important;
}
на
#header .flexslider {
width: 100%;
margin: 0 auto !important;
height: 550px;
}
затем добавьте в конец main.css
.bannersLeft {
margin-left: 1%;
width: 24%;
height: 550px;
float: left;
margin-top: 5px;
}
.banners {
width: 100%;
height: 49.5%;
margin-bottom: 1%;
}
.bannersRight {
float: right;
width: 24%;
height: 550px;
margin-top: 5px;
}
после этого в шаблоне HTML перед
{% ENDIF %}
		<!-- /Главная страница -->
вставьте
<div class="bannersLeft">
   <div class="banners">
			<a href="ссылка" title="">
			  <img src="{ASSETS_IMAGES_PATH}картинка">
			</a>
   </div>
   <div class="banners">
			<a href="ссылка" title="">
			  <img src="{ASSETS_IMAGES_PATH}картинка">
			</a>
   </div>
</div>
<div class="bannersRight">
			<a href="ссылка" title="">
			  <img src="{ASSETS_IMAGES_PATH}картинка">
			</a>
</div>
заменив слово ссылка на адрес страницы, куда будет вести баннер, и слово картинка замените на название изображения, загрузив изображения в редакторе шаблонов. ориентировочные размеры для баннеров 3,4 - 460х270, 5 - 460х550 пикселей.

#9 tank2612

tank2612

    Пользователь

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

Отправлено 09 Февраль 2015 - 13:09

Изображение

Извините пожалуйста за вопрос , как расширить данное меню Заранее спасибо. Чтобы блоки на 1 строке количество увеличилось и до стрелок расширилось поле

Изображение

Как увеличить шрифт в самое ячейке и сделать его "жирным"

Ещё вы не ответили на вопрос. Как сделать "точечки" на слайдках , чтобы они переключались

#10 Alekseys

Alekseys

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

  • Модераторы
  • 2 355 сообщений

Отправлено 09 Февраль 2015 - 13:23

Просмотр сообщенияtank2612 (09 Февраль 2015 - 13:09) писал:

Извините пожалуйста за вопрос , как расширить данное меню Заранее спасибо. Чтобы блоки на 1 строке количество увеличилось и до стрелок расширилось поле

Как увеличить шрифт в самое ячейке и сделать его "жирным"
В main.css замените
.inner {
margin: 0 auto;
width: 1200px;
padding: 0;
clear: both;
background-color: #ffffff;
box-sizing: border-box;
}
на
.inner {
margin: 0 auto;
width: 99%;
padding: 0;
clear: both;
background-color: #ffffff;
box-sizing: border-box;
}
в
#column-left .box .box-heading {
padding: 15px 0;
border-bottom: 1px solid #e1e1e1;
font-size: 20px;
font-weight: normal !important;
margin: 0 10px;
color: #666666;
}
увеличьте размер font-size: 20px; и замените
.box-category > ul > li > a {
text-decoration: none;
color: #333;
padding: 10px 28px 10px 10px;
display: block;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}
на
.box-category > ul > li > a {
text-decoration: none;
color: #333;
padding: 10px 28px 10px 10px;
display: block;
transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
font-size: 18px;
font-weight: bold;
}
также в конец main.css добавьте
.bannersRight img {
width: 100%;
height: 100%;
}
.banners img {
width: 100%;
height: 100%;
}

Просмотр сообщенияtank2612 (09 Февраль 2015 - 13:09) писал:

Ещё вы не ответили на вопрос. Как сделать "точечки" на слайдках , чтобы они переключались
Заменить слайдер.

#11 tank2612

tank2612

    Пользователь

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

Отправлено 09 Февраль 2015 - 13:27

Как заменить слайдер ?

#12 Ирина345

Ирина345

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

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

Отправлено 09 Февраль 2015 - 13:31

Просмотр сообщенияtank2612 (09 Февраль 2015 - 13:27) писал:

Как заменить слайдер ?
Здравствуйте, если Вы хотите изменить слайдер, то используйте данную инструкцию
http://storeland.ru/...t/faq#block4;51

#13 tank2612

tank2612

    Пользователь

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

Отправлено 09 Февраль 2015 - 13:42

Просмотр сообщенияИрина345 (09 Февраль 2015 - 13:31) писал:

Здравствуйте, если Вы хотите изменить слайдер, то используйте данную инструкцию
http://storeland.ru/...t/faq#block4;51
он не затронет мои изменения ? Просто поменяется тип отображения слайдов , я так понимаю ?

#14 tank2612

tank2612

    Пользователь

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

Отправлено 09 Февраль 2015 - 14:02

ещё проблема.
Вот меня не устраивает как показываются списки в каталоге. Оно никак не выделяет. Допустим навожу мышкой на  "одежду" появляется справа список и становится непонятно , откуда он - плохо видно
Изображение
.
Можно ли как нибудь сделать что-то наподобие скрина 2 ?

Изображение

#15 Ирина345

Ирина345

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

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

Отправлено 09 Февраль 2015 - 14:57

Просмотр сообщенияtank2612 (09 Февраль 2015 - 14:02) писал:

ещё проблема.
Вот меня не устраивает как показываются списки в каталоге. Оно никак не выделяет. Допустим навожу мышкой на  "одежду" появляется справа список и становится непонятно , откуда он - плохо видно

.
Можно ли как нибудь сделать что-то наподобие скрина 2 ?


Здравствуйте, найдите в main.css
.box-category > ul > li > a:hover {
background-color: #f1f1f1;
padding: 9px 27px 9px 19px;
}
замените на


.box-category > ul > li > a:hover {
background-color: #f1f1f1;
padding: 9px 27px 9px 19px;
border: 1px solid #ff0000;
}



далее найдите
.box-category > ul > li:hover > ul {
display: block;
}
замените на


.box-category > ul > li:hover > ul {
display: block;
border: 1px solid #F00;
}



#16 tank2612

tank2612

    Пользователь

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

Отправлено 09 Февраль 2015 - 16:43

Просмотр сообщенияИрина345 (09 Февраль 2015 - 14:57) писал:

Здравствуйте, найдите в main.css
.box-category > ul > li > a:hover {
background-color: #f1f1f1;
padding: 9px 27px 9px 19px;
}
замените на


.box-category > ul > li > a:hover {
background-color: #f1f1f1;
padding: 9px 27px 9px 19px;
border: 1px solid #ff0000;
}



далее найдите
.box-category > ul > li:hover > ul {
display: block;
}
замените на


.box-category > ul > li:hover > ul {
display: block;
border: 1px solid #F00;
}

Все хорошо , но есть недочеты. Красные линии не должны быть раздельны ( штрихом обозначил - где их не должно быть и они должны идти вместе.
Изображение
когда убираю мышку с одежды выделение исчезает
Изображение
вобщем нужно сделать так
Изображение

#17 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 10 Февраль 2015 - 00:53

В main.css добавьте:
.box-category > ul > li > ul > li:first-child {
  background: #fff;
  display: block;
  height: 25px;
  margin-left: -11px;
  margin-top: -10px;
  padding: 7px 5px;
}


#18 tank2612

tank2612

    Пользователь

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

Отправлено 10 Февраль 2015 - 01:04

Просмотр сообщенияVaccina (10 Февраль 2015 - 00:53) писал:

В main.css добавьте:
.box-category > ul > li > ul > li:first-child {
background: #fff;
display: block;
height: 25px;
margin-left: -11px;
margin-top: -10px;
padding: 7px 5px;
}
куда именно

#19 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 10 Февраль 2015 - 01:10

Можно в самый конец файла, можно под блоком стилей, отвечающие за списки каталога:
.box-category > ul > li ul > li > a.active {
  font-weight: bold;
}


#20 tank2612

tank2612

    Пользователь

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

Отправлено 10 Февраль 2015 - 08:57

Просмотр сообщенияVaccina (10 Февраль 2015 - 01:10) писал:

Можно в самый конец файла, можно под блоком стилей, отвечающие за списки каталога:
.box-category > ul > li ul > li > a.active {
font-weight: bold;
}

Все сделал как надо , но

1. когда убираешь мышку опять же с Каталога "одежда" исчезает выделение его .
2. Нужно изменить цвет "красной каймы" и сделать её другим цветом и чуточку жирнее.
3. Цвеет  "кнопки" "одежда" - должен совпадать с выпадающим меню . Т..е. цвет кнопки одежда серый , а цвет выпадающего меню белый. Нужно их в 1 цвет !
Изображение
Изображение




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

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