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

[ya.r.ik]

Нашел красивый слайдер, но затрудняюсь его поставить.Прибегаю к вашей помощи.
Добавил css и js.
Что необходимо добавить на саму страницу, где будет изображаться слайдер?
Добавить файл со слайдером не смог, тут ссылка.

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

• 

[Vaccina]

Цитата

Что необходимо добавить на саму страницу, где будет изображаться слайдер?

Пример установки вы можете посмотреть тут http://slidesjs.com/ блок "Basic HTML Structure"

[ya.r.ik]

Спасибо.Буду разбираться.

[ya.r.ik]

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

[Vaccina]

Темы подобной нет. Но последовательность вставки слайдера всегда одинакова, за исключением небольших персональных отличий. Опишите подробнее что у вас не получается.

[ya.r.ik]

Загрузил файлы js и css. Подключил <script type="text/javascript" src="{ASSETS_JS_PATH}slides.min.jquery.js"></script>.Содержимой файла css добавил в стили main.css  Дальше не знаю что делать.

Прикрепленные файлы

•  global.css   2,84К   346 Количество загрузок:

[Vaccina]

Дальше вам необходимо разместить каркас HTML который у них приведен в блоке "Basic HTML Structure".
Например вставив его в шаблон "Страница"

[ya.r.ik]

Я наверное что-то пропустил.Я разместил этот код в шаблоне страница.

<div id="slides">
  <div class="slides_container">
	<div>
	  <h1>Slide 1</h1>
	  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
	<div>
	  <h1>Slide 2</h1>
	  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
	<div>
	  <h1>Slide 3</h1>
	  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
	<div>
	  <h1>Slide 4</h1>
	  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</div>
  </div>
</div>

Посмотрите на фото что получилось на месте слайдера.

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

• 

[Vaccina]

Из скриншота видно что слайдер не отрабатывается. Вы вставляли в файл main.js блок ?

$(function(){
	$("#slides").slides();
});

[ya.r.ik]

Да, блок вставлен в main.js

<script>
  $(function(){
	$("#slides").slides();
  });
</script>

[Vaccina]

В файл main.js необходимо вставлять именно

  $(function(){
	$("#slides").slides();
  });

а не

<script>
  $(function(){
	$("#slides").slides();
  });
</script>

так как последний вариант вызовет синтаксическую ошибку.

[ya.r.ik]

Ничего не изменилось

[Vaccina]

Пожалуйста, дайте ссылку на магазин где данный слайдер используется и работает не корректно. На сайте http://mattress-sulin.ru/ слайдера не заметила. Необходимо визуально понять в чем может быть проблема.

[ya.r.ik]

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

[Vaccina]

Видно что у вас не подключены стили которые предоставляются в архиве вместе с изображениями и js файлом. Вам необходимо подключить стили как это делается с стандартным main.css

<link rel="stylesheet" href="http://styles.storeland.ru/web/upload/assets/styles/34/33373/main.css" type="text/css" />

Код слайдера ссылками будет примерно такой. (взято из примера http://slidesjs.com/examples/standard/)

<div id="slides">
				<div class="slides_container">
					<a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>
					<a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="570" height="270" alt="Slide 2"></a>
					<a href="http://www.flickr.com/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="570" height="270" alt="Slide 3"></a>
					<a href="http://www.flickr.com/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="570" height="270" alt="Slide 4"></a>
					<a href="http://www.flickr.com/photos/bu7amd/3447416780/" title="“I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.” | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-5.jpg" width="570" height="270" alt="Slide 5"></a>
					<a href="http://www.flickr.com/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-6.jpg" width="570" height="270" alt="Slide 6"></a>
					<a href="http://www.flickr.com/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-7.jpg" width="570" height="270" alt="Slide 7"></a>
				</div>
				<a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
				<a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
			</div>

[kkkursant55]

Огромная просьба, напишите пожалуйста поэтапно с картинками установку слайдера для шаблона сияние, буду очень признателен, мой сайт www.samsung-ezon.ru

[kkkursant55]

нужен слайдер как здесь http://ezonmexico.com/
все изображения загружены на сайт

[Vaccina]

Данный слайдер что вы указываете реализуется через

Функционал слайдера (main.js)

function slideSwitch() {
	var $active = $('#slideshow IMG.active');
 
	if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
 
	// use this to pull the images in the order they appear in the markup
	var $next =  $active.next().length ? $active.next()
		: $('#slideshow IMG:first');
 
	// uncomment the 3 lines below to pull the images in random order
	
	// var $sibs  = $active.siblings();
	// var rndNum = Math.floor(Math.random() * $sibs.length );
	// var $next  = $( $sibs[ rndNum ] );
 
 
	$active.addClass('last-active');
 
	$next.css({opacity: 0.0})
		.addClass('active')
		.animate({opacity: 1.0}, 1000, function() {
			$active.removeClass('active last-active');
		});
}
 
$(function() {
	setInterval( "slideSwitch()", 5000 );
});

Стили для оформления (файл main.css)

#slideshow {
	position:relative;
	height:350px;
}
 
#slideshow IMG {
	position:absolute;
	top:0;
	left:0;
	z-index:8;
	opacity:0.0;
}
 
#slideshow IMG.active {
	z-index:10;
	opacity:1.0;
}
 
#slideshow IMG.last-active {
	z-index:9;
}

HTML каркас для вставки

<div id="slideshow"> 
	<img src="http://c745251.r51.cf2.rackcdn.com/slider/slider1.png" alt="Slideshow Image 1" class="active" /> 
	<img src="http://c745251.r51.cf2.rackcdn.com/slider/slider2.png" alt="Slideshow Image 2" /> 
	<img src="http://c745251.r51.cf2.rackcdn.com/slider/slider3.png" alt="Slideshow Image 3" /> 
	<img src="http://c745251.r51.cf2.rackcdn.com/slider/slider4.png" alt="Slideshow Image 4" /> 
	<img src="http://c745251.r51.cf2.rackcdn.com/slider/slider5.png" alt="Slideshow Image 5" />
	<img src="http://c745251.r51.cf2.rackcdn.com/slider/slider6.png" alt="Slideshow Image 6" /> 
</div> 

Вам лишь необходимо расставить требуемые блоки по файлам.

[kkkursant55]

огромное спасибо!все получилось!!!!!!

[Dimitrii]

Доброго времени суток, хочу установить такой же слайдер как Здесь мой сайт тут помогите по шагам объяснить как и что надо сделать для этого (начиная с того что я его загрузил)

пример:

1) Открыл Админ панель

2) Распаковал архив с слайдом

3) далее с настройками файлов(js,ccs,и др) прошу подробной помощи, что куда открывать где привязывать и какие файлы заливать из папки в админку.

Ваша подробная помощь прольет свет по данной тематике. Огромное спасибо Вам зарание