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

Реферальная программа Мегаплана

Партнерская программа Kredov

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

#1 klimentino

klimentino
  • Пользователь
  • 170 сообщений
  • Репутация: 4
0

Отправлено 03 Март 2016 - 19:46

В принципе вопрос озвучен в теме

Сам слайдер и исходники находятся здесь - http://tutorialzine....s3-photo-stack/

Заранее спасибо за помощь


 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Не отображается слайд-шоу в шапке сайта
  2. Массовая оптимизация картинок — уменьшение размера без потери качества
  3. Изменение размера картинки при уменьшении окна браузера
  4. Выполняю различные действия с изображениями (также делаю слайд-шоу)
  5. Слайд шоу с настройкой в админ панели

#2 illi

illi
  • Пользователь
  • 91 сообщений
  • Репутация: 4

Отправлено 03 Март 2016 - 20:35

В этих строках, файл прикрепил

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

  • Снимок.PNG

  • 0

#3 klimentino

klimentino
    Topic Starter
  • Пользователь
  • 170 сообщений
  • Репутация: 4

Отправлено 03 Март 2016 - 20:59

Спасибо за помощь, уменшил :) :smile-thumb-up: :smile-thumb-up: :smile-thumb-up:

А эти строки обазательно удалять ? :

    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;


  • 0

#4 illi

illi
  • Пользователь
  • 91 сообщений
  • Репутация: 4

Отправлено 03 Март 2016 - 21:10

@klimentino, Нет, насколько я знаю они отвечают за отображение в разных браузерах,например, в chrome,safari,ie и тп


  • 0

#5 klimentino

klimentino
    Topic Starter
  • Пользователь
  • 170 сообщений
  • Репутация: 4

Отправлено 03 Март 2016 - 21:13

Вижу вы хорошо разбираетесь в коде :smile-thumb-up: :)

 

Подскажите как вынести данные строки слайдера в css ?

 

                <ul id="photos">
                    <li><a href="http://www.flickr.co...ker/8500935165/" style="background-image:url(images/slider/udar-shershnia.jpg)">Landscape 5</a></li>

                <li> ...</li>
                </ul>


Сообщение отредактировал klimentino: 03 Март 2016 - 21:14

  • 0

#6 illi

illi
  • Пользователь
  • 91 сообщений
  • Репутация: 4

Отправлено 03 Март 2016 - 21:17

@klimentino,Какие строки? я немного не понял. Не то что бы хорошо, но база есть  :rolleyes:


  • 0

#7 klimentino

klimentino
    Topic Starter
  • Пользователь
  • 170 сообщений
  • Репутация: 4

Отправлено 03 Март 2016 - 21:21

Данные строки находятся в коде html странички , как их вынести в файл css ?

Это сами картинки слайдера в списке

 

<ul id="photos">
                    <li><a href="http://www.flickr.co...ker/8500935165/" style="background-image:url(images/slider/udar-shershnia.jpg)">Landscape 5</a></li>

                <li> ...</li>
                </ul>


<header>
			<div id="logo_box">
				<h1><a href="http://netearn.ru/" id="logo">Заработок в интернете с нуля <span>Только практический опыт </span></a></h1>
			</div>
			<nav>
				<ul id="menu">
					<li><a href="obuchajushhie-video-kursy-dlja-nachinajushhih.htm">Видео курсы</a></li>
					<li><a href="currency-exchange.htm">Обменники валют</a></li>
					<li><a href="uslugi-po-sozdaniju-sajta.htm">Услуги</a></li>
					<li class="bg_none"><a href="communications.htm">Контакты</a></li>
				</ul>
			</nav>
			<!-- slider -->
			<div class="slider">
	            <ul id="photos">
		            <li><a href="http://www.flickr.com/photos/brockwhittaker/8500935165/" style="background-image:url(images/slider/udar-shershnia.jpg)">Landscape 5</a></li>
		            <li><a href="http://www.flickr.com/photos/31538238@N07/8412935103/" style="background-image:url(images/slider/prokrastinatorskie-petli.jpg)">Landscape 4</a></li>
		            <li><a href="http://www.flickr.com/photos/zanthia/8461978995/" style="background-image:url(http://farm9.staticflickr.com/8388/8461978995_1a4a48ca14_c.jpg)">Landscape 3</a></li>
		            <li><a href="http://www.flickr.com/photos/29066067@N02/8452950806/" style="background-image:url(http://farm9.staticflickr.com/8233/8452950806_3faf2a6546_z.jpg)">Landscape 2</a></li>
		            <li><a href="http://www.flickr.com/photos/zanthia/8477608906/" style="background-image:url(http://farm9.staticflickr.com/8094/8477608906_a02f8d5774_z.jpg)">Landscape 1</a></li>
	            </ul>
				    <!-- стрелки slider -->
	                <a href="#" class="arrow previous"></a>
	                <a href="#" class="arrow next"></a>
					<!-- стрелки slider -->
            </div>
			<!-- slider -->
		</header>

Сообщение отредактировал klimentino: 03 Март 2016 - 21:20

  • 0

#8 illi

illi
  • Пользователь
  • 91 сообщений
  • Репутация: 4

Отправлено 03 Март 2016 - 21:22

@klimentino,Так для этих строк приписан id="photos". Соответственно находите этот id в css файле и переносите эти строки 

"background-image:url(images/slider/udar-shershnia.jpg)"

в нужный id в css файл  :)  :)  

А зачем их выносить то?


Сообщение отредактировал illi: 03 Март 2016 - 21:23

  • 0

#9 klimentino

klimentino
    Topic Starter
  • Пользователь
  • 170 сообщений
  • Репутация: 4

Отправлено 03 Март 2016 - 21:24

Не знаю как перенести чтобы списком было, если один бекграунд то понятно

#photos{
	margin:0 auto;
	padding-top:170px;
	width:800px;
	position:relative;
}

#photos li{
	position:absolute;
	width:350px;
	height:350px;
	overflow:hidden;
	background-color:#fff;
	box-shadow: 1px 1px 1px #ccc;
	z-index:10;
	
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	animation-duration: 1s;
}

#photos li a{
	position:absolute;
	top:6px;
	left:6px;
	right:6px;
	bottom:6px;
	background-size: cover;
	text-indent:-9999px;
	overflow:hidden;
}


  • 0

#10 illi

illi
  • Пользователь
  • 91 сообщений
  • Репутация: 4

Отправлено 03 Март 2016 - 21:27

@klimentino,Работать со слайдерами мне не приходилось, на загуглив я нашел тему на хабре

Должно помочь  :rolleyes:


  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru