Вопросы Теги

Как создать простой слайдер изображений jQuery с эффектом скольжения или непрозрачности?

для этого вам нужно создать собственный LayoutManager 

public class LinearLayoutManagerWithSmoothScroller extends LinearLayoutManager {

    public LinearLayoutManagerWithSmoothScroller(Context context) {
        super(context, VERTICAL, false);
    }

    public LinearLayoutManagerWithSmoothScroller(Context context, int orientation, boolean reverseLayout) {
        super(context, orientation, reverseLayout);
    }

    @Override
    public void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state,
                                       int position) {
        RecyclerView.SmoothScroller smoothScroller = new TopSnappedSmoothScroller(recyclerView.getContext());
        smoothScroller.setTargetPosition(position);
        startSmoothScroll(smoothScroller);
    }

    private class TopSnappedSmoothScroller extends LinearSmoothScroller {
        public TopSnappedSmoothScroller(Context context) {
            super(context);

        }

        @Override
        public PointF computeScrollVectorForPosition(int targetPosition) {
            return LinearLayoutManagerWithSmoothScroller.this
                    .computeScrollVectorForPosition(targetPosition);
        }

        @Override
        protected int getVerticalSnapPreference() {
            return SNAP_TO_START;
        }
    }
}

, использовать его для вашего RecyclerView и вызвать smoothScrollToPosition.

example: 

 recyclerView.setLayoutManager(new LinearLayoutManagerWithSmoothScroller(context));
 recyclerView.smoothScrollToPosition(position);

это будет прокручиваться до элемента RecyclerView указанной позиции.

надеюсь, что это поможет.

29
задан Barlas Apaydin 14 October 2014 в 13:41
поделиться

5 ответов

Прежде чем проверять примеры, вы должны знать две функции jQuery, которые я использовал чаще всего.

index () возвращает значение - целое число, указывающее позицию первого элемента в объекте jQuery относительно его родственных элементов.

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

Обычно я беру выбранный триггерный элемент index value и сопоставляю это значение на изображениях с помощью метода eq.

- Эффект FadeIn / FadeOut .

- Эффект скольжения .

- альтернативный ответ мыши .

html sample: 

<ul class="images">
   <li>
      <img src="images/1.jpg" alt="1" />
   </li>
   <li>
      <img src="images/2.jpg" alt="2" />
   </li>
   ...
</ul>

<ul class="triggers">
   <li>1</li>
   <li>2</li>
   ...
</ul>
<span class="control prev">Prev</span>
<span class="control next">Next</span>

ЭФФЕКТ ОТКРЫТИЯ: jsFiddle.

трюк css: перекрывающиеся изображения с положением: абсолютное 

ul.images { position:relative; }
  ul.images li { position:absolute; }

jQuery: 

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;

triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
    images.fadeOut(300).eq(target).fadeIn(300);
    triggers.removeClass('active').eq(target).addClass('active');
}
<час>

Эффект скольжения: jsFiddle.

трюк css: с двойной оберткой и использованием в качестве маски дочернего элемента 

.mask { float:left; margin:40px; width:270px; height:266px; overflow:hidden;  }
    ul.images { position:relative; top:0px;left:0px; }
    /* this width must be total of the images, it comes from jquery */
        ul.images li { float:left; }

jQuery: 

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var mask = $('.mask ul.images');
var imgWidth = images.width();

triggers.first().addClass('active');
mask.css('width', imgWidth*(lastElem+1) +'px');

function sliderResponse(target) {
    mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300);
    triggers.removeClass('active').eq(target).addClass('active');
}
< hr>

Общий ответ jQuery для обоих слайдеров:

( вызывает + следующий / предыдущий клик и время ) 

triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});

$('.next').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}

var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },5000);
}
64
ответ дан Barlas Apaydin 14 October 2014 в 13:41
поделиться

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

<script language="JavaScript"> 
var i = 0; var path = new Array(); 

// LIST OF IMAGES 
path[0] = "image_1.gif"; 
path[1] = "image_2.gif"; 
path[2] = "image_3.gif"; 

function swapImage() { document.slide.src = path[i]; 
if(i < path.length - 1) i++; 
else i = 0; setTimeout("swapImage()",3000); 
} window.onload=swapImage;

</script> 

<img height="200" name="slide" src="image_1.gif" width="400" />
18
ответ дан Brad Larson 14 October 2014 в 13:41
поделиться

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
  var current_img = 1;
  var i;

  $(document).ready(function(){
    var imgs = $("#image").find("img");

    function show_img(){
      for (i = 1; i < imgs.length+1; i++) {
        if(i == current_img){
          $(imgs[i-1]).show();
        }else{
          $(imgs[i-1]).hide()
        }
      }
    }

    $("#prev").click(function(){
      if(current_img == 1){
        current_img = imgs.length;
      }else{
        current_img = current_img - 1
      }
      show_img();
    });

    $("#next").click(function(){
      if(current_img == imgs.length){
        current_img = 1;
      }else{
        current_img = current_img + 1
      }
      show_img();
    });

  });

</script>
</head>
<body>

<div style="margin-top: 100px;"></div>
<div class="container">
  <div class="col-sm-3">
    <button type="button" id="prev" class="btn">Previous</button>
  </div>

  <div class="col-sm-6">
    <div id="image">
      <img src="https://www.w3schools.com/html/pulpitrock.jpg" alt="image1">
      <img src="https://www.w3schools.com/cSS/img_forest.jpg" alt="image2" hidden="true" style="max-width: 500px;">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="image3" hidden="true">
    </div>
  </div>

  <div class="col-sm-3">
    <button type="button" id="next" class="btn">Next</button>
  </div>
</div>

</body>
</html>
2
ответ дан V K Singh 14 October 2014 в 13:41
поделиться

Недавно я создал решение с галереей изображений и слайдером, который появляется при нажатии на изображение.

Взгляните на код здесь: Код GitHub

И живой пример здесь: Пример кода 

var CreateGallery = function(parameters) {
	var self = this;
	this.galleryImages = [];
	this.galleryImagesSrcs = [];
	this.galleryImagesNum = 0;
	this.counter;
	this.galleryTitle = parameters.galleryTitle != undefined ? parameters.galleryTitle : 'Gallery image';
	this.maxMobileWidth = parameters.maxMobileWidth != undefined ? parameters.maxMobileWidth : 768;
	this.numMobileImg = parameters.numMobileImg != undefined ? parameters.numMobileImg : 2;
	this.maxTabletWidth = parameters.maxTabletWidth != undefined ? parameters.maxTabletWidth : 1024;
	this.numTabletImg = parameters.numTabletImg != undefined ? parameters.numTabletImg : 3;
	this.addModalGallery = function(gallerySelf = self){
		var $div = $(document.createElement('div')).attr({
			'id': 'modal-gallery'
		}).append($(document.createElement('div')).attr({
				'class': 'header'
			}).append($(document.createElement('button')).attr({
					'class': 'close-button',
					'type': 'button'
				}).html('&times;')
			).append($(document.createElement('h2')).text(gallerySelf.galleryTitle))
		).append($(document.createElement('div')).attr({
				'class': 'text-center'
			}).append($(document.createElement('img')).attr({
					'id': 'gallery-img'
				})
			).append($(document.createElement('button')).attr({
					'class': 'prev-button',
					'type': 'button'
				}).html('&#9668;')
			).append($(document.createElement('button')).attr({
					'class': 'next-button',
					'type': 'button'
				}).html('&#9658;')
			)
		);
		parameters.element.after($div);
	};
	$(document).on('click', 'button.prev-button', {self: self}, function() {
		var $currImg = self.counter >= 1 ? self.galleryImages[--self.counter] : self.galleryImages[self.counter];
		var $currHash = self.galleryImagesSrcs[self.counter];
		var $src = $currImg.src;
		window.location.hash = $currHash;
		$('img#gallery-img').attr('src', $src);
		$('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1));
	});
	$(document).on('click', 'button.next-button', {self: self}, function() {
		var $currImg = self.counter < (self.galleryImagesNum - 1) ? self.galleryImages[++self.counter] : self.galleryImages[self.counter];
		var $currHash = self.galleryImagesSrcs[self.counter];
		var $src = $currImg.src;
		window.location.hash = $currHash;
		$('img#gallery-img').attr('src', $src);
		$('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1));
	});
	$(document).on('click', 'div#modal-gallery button.close-button', function() {
		$('#modal-gallery').css('position', 'relative');
		$('#modal-gallery').hide();
		$('body').css('overflow', 'visible');
	});
	parameters.element.find('a').on('click', {self: self}, function(event) {
		event.preventDefault();
		$('#modal-gallery').css('position', 'fixed');
		$('#modal-gallery').show();
		$('body').css('overflow', 'hidden');
		var $currHash = this.hash.substr(1);
		self.counter = self.galleryImagesSrcs.indexOf($currHash); 
		var $src = $currHash;
		window.location.hash = $currHash;
		$('img#gallery-img').attr('src', $src);
		$('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1));
	});
	this.sizeGallery = function(gallerySelf = self) {
		var $modalGallery = $(document).find("div#modal-gallery");
		if($modalGallery.length <= 0) {
			this.addModalGallery();
		}
		var $windowWidth = $(window).width();
		var $parentWidth = parameters.element.width();
		var $thumbnailHref = parameters.element.find('img:first').attr('src');
		if($windowWidth < gallerySelf.maxMobileWidth) {
			var percentMobile = Math.floor(100 / gallerySelf.numMobileImg); 
			var emMobile = 0;
			var pxMobile = 2;
//                        var emMobile = gallerySelf.numMobileImg * 0.4;
//                        var pxMobile = gallerySelf.numMobileImg * 2;
			parameters.element.find('img').css('width', 'calc('+percentMobile+'% - '+emMobile+'em - '+pxMobile+'px)');
		} else if($windowWidth < gallerySelf.maxTabletWidth) {
			var percentTablet = Math.floor(100 / gallerySelf.numTabletImg); 
			var emTablet = 0;
			var pxTablet = 2;
//                        var emTablet = gallerySelf.numMobileImg * 0.4;
//                        var pxTablet = gallerySelf.numMobileImg * 2;
			parameters.element.find('img').css('width', 'calc('+percentTablet+'% - '+emTablet+'em - '+pxTablet+'px)');
		} else {
			var $thumbImg = new Image();
			$thumbImg.src = $thumbnailHref;
			$thumbImg.onload = function() {
				var $thumbnailWidth = this.width;
				if($parentWidth > 0 && $thumbnailWidth > 0) {
					parameters.element.find('img').css('width', (Math.ceil($thumbnailWidth * 100 / $parentWidth))+'%');
				}
			};
		}
	};
	this.startGallery = function(gallerySelf = self) {
		parameters.element.find('a').each(function(index, el) {
			var $currHash = el.hash.substr(1);
			var $img = new Image();
			$img.src = $currHash;
			gallerySelf.galleryImages.push($img);
			gallerySelf.galleryImagesSrcs.push($currHash);
		});
		this.galleryImagesNum = this.galleryImages.length;
	};
	this.sizeGallery();
	this.startGallery();
};
var myGallery;
$(window).on('load', function() {
	myGallery = new CreateGallery({
		element: $('#div-gallery'),
		maxMobileWidth: 768,
		numMobileImg: 2,
		maxTabletWidth: 1024,
		numTabletImg: 3
	});
});
$(window).on('resize', function() {
	myGallery.sizeGallery();
});
#div-gallery {
	text-align: center;
}
#div-gallery img {
	margin-right: auto;
	margin-left: auto;
}
div#modal-gallery {
	top: 0;
	left: 0;
	width: 100%;
	max-width: none;
	height: 100vh;
	min-height: 100vh;
	margin-left: 0;
	border: 0;
	border-radius: 0;
	z-index: 1006;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: none;
	background-color: #fefefe;
	position: relative;
	margin-right: auto;
	overflow-y: auto;
	padding: 0;
}
div#modal-gallery div.header {
	position: relative; 
}
div#modal-gallery div.header h2 {
	margin-left: 1rem; 
}
div#modal-gallery div.header button.close-button {
	position: absolute;
	top: calc(50% - 1em);
	right: 1rem;
}
div#modal-gallery img {
	display: block;
	max-width: 98%;
	max-height: calc(100vh - 5em);
	margin-right: auto;
	margin-left: auto;
}
div#modal-gallery div.text-center {
	position: relative;
}
button.close-button {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #333;
	background-color: #fff;
	border-color: #ccc;
}
button.close-button:hover, button.close-button:focus {
	background-color: #ddd;
}
button.next-button:hover, button.prev-button:hover, button.next-button:focus, button.prev-button:focus {
	color: #fff;
	text-decoration: none;
	filter: alpha(opacity=90);
	outline: 0;
	opacity: .9;
}
button.next-button, button.prev-button {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 15%;
	font-size: 20px;
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0,0,0,.6);
	background-color: rgba(0,0,0,0);
	filter: alpha(opacity=50);
	opacity: .5;
	border: none;
}
button.next-button {
	right: 0;
	left: auto;
	background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
	background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
	background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
	background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
	background-repeat: repeat-x;
}
button.prev-button {
	background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
	background-image: -o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
	background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));
	background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
	background-repeat: repeat-x;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div-gallery">
	<a href="#http://placehold.it/1024x1024/ff0000/000000?text=Gallery+image+1"><img src="http://placehold.it/300x300/ff0000/000000?text=Gallery+image+1" alt=""></a>
	<a href="#http://placehold.it/1024x1024/ff4000/000000?text=Gallery+image+2"><img src="http://placehold.it/300x300/ff4000/000000?text=Gallery+image+2" alt=""></a>
	<a href="#http://placehold.it/1024x1024/ff8000/000000?text=Gallery+image+3"><img src="http://placehold.it/300x300/ff8000/000000?text=Gallery+image+3" alt=""></a>
	<a href="#http://placehold.it/1024x1024/ffbf00/000000?text=Gallery+image+4"><img src="http://placehold.it/300x300/ffbf00/000000?text=Gallery+image+4" alt=""></a>
	<a href="#http://placehold.it/1024x1024/ffff00/000000?text=Gallery+image+5"><img src="http://placehold.it/300x300/ffff00/000000?text=Gallery+image+5" alt=""></a>
	<a href="#http://placehold.it/1024x1024/bfff00/000000?text=Gallery+image+6"><img src="http://placehold.it/300x300/bfff00/000000?text=Gallery+image+6" alt=""></a>
	<a href="#http://placehold.it/1024x1024/80ff00/000000?text=Gallery+image+7"><img src="http://placehold.it/300x300/80ff00/000000?text=Gallery+image+7" alt=""></a>
	<a href="#http://placehold.it/1024x1024/40ff00/000000?text=Gallery+image+8"><img src="http://placehold.it/300x300/40ff00/000000?text=Gallery+image+8" alt=""></a>
	<a href="#http://placehold.it/1024x1024/00ff00/000000?text=Gallery+image+9"><img src="http://placehold.it/300x300/00ff00/000000?text=Gallery+image+9" alt=""></a>
	<a href="#http://placehold.it/1024x1024/00ff40/000000?text=Gallery+image+10"><img src="http://placehold.it/300x300/00ff40/000000?text=Gallery+image+10" alt=""></a>
	<a href="#http://placehold.it/1024x1024/00ff80/000000?text=Gallery+image+11"><img src="http://placehold.it/300x300/00ff80/000000?text=Gallery+image+11" alt=""></a>
	<a href="#http://placehold.it/1024x1024/00ffbf/000000?text=Gallery+image+12"><img src="http://placehold.it/300x300/00ffbf/000000?text=Gallery+image+12" alt=""></a>
	<a href="#http://placehold.it/1024x1024/00ffff/000000?text=Gallery+image+13"><img src="http://placehold.it/300x300/00ffff/000000?text=Gallery+image+13" alt=""></a>
	<a href="#http://placehold.it/1024x1024/00bfff/000000?text=Gallery+image+14"><img src="http://placehold.it/300x300/00bfff/000000?text=Gallery+image+14" alt=""></a>
	<a href="#http://placehold.it/1024x1024/0080ff/000000?text=Gallery+image+15"><img src="http://placehold.it/300x300/0080ff/000000?text=Gallery+image+15" alt=""></a>
	<a href="#http://placehold.it/1024x1024/0040ff/000000?text=Gallery+image+16"><img src="http://placehold.it/300x300/0040ff/000000?text=Gallery+image+16" alt=""></a>
</div>
2
ответ дан q81 14 October 2014 в 13:41
поделиться

Я написал учебник по созданию слайд-шоу, Страница учебника На случай, если ссылка станет недействительной, я включил код в свой ответ ниже.

HTML: 

<div id="slideShow">
 <div id="slideShowWindow">
 <div class="slide">
 <img src="”img1.png”/">
 <div class="slideText">
 <h2>The Slide Title</h2> 
 <p>This is the slide text</p>
 </div> <!-- </slideText> -->
 </div> <!-- </slide> repeat as many times as needed --> 
 </div> <!-- </slideShowWindow> -->
 </div> <!-- </slideshow> -->

CSS: 

img {
 display: block;
 width: 100%;
 height: auto;
}
p{
 background:none;
 color:#ffffff;
}
#slideShow #slideShowWindow {
 width: 650px;
 height: 450px;
 margin: 0;
 padding: 0;
 position: relative;
 overflow:hidden;
 margin-left: auto;
 margin-right:auto;
}

#slideShow #slideShowWindow .slide {
 margin: 0;
 padding: 0;
 width: 650px;
 height: 450px;
 float: left;
 position: relative;
 margin-left:auto;
 margin-right: auto;
 }

#slideshow #slideshowWindow .slide, .slideText {
    position:absolute;
    bottom:18px;
    left:0;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    color:#ffffff;
    font-family:Myriad Pro, Arial, Helvetica, sans-serif;
} 
.slideText {
 background: rgba(128, 128, 128, 0.49);
}

#slideshow #slideshowWindow .slide .slideText h2, 
#slideshow #slideshowWindow .slide .slideText p {
    margin:10px;
    padding:15px;
}

.slideNav {
 display: block;
 text-indent: -10000px;
 position: absolute;
 cursor: pointer;
}
#leftNav {
 left: 0;
 bottom: 0;
 width: 48px;
 height: 48px;
 background-image: url("../Images/plus_add_minus.png");
 background-repeat: no-repeat;
 z-index: 10;
}
#rightNav {
 right: 0;
 bottom: 0;
 width: 48px;
 height: 48px;
 background-image: url("../Images/plus_add_green.png");
 background-repeat: no-repeat;
 z-index: 10; }

jQuery: 

$(document).ready(function () {

 var currentPosition = 0;
 var slideWidth = 650;
 var slides = $('.slide');
 var numberOfSlides = slides.length;
 var slideShowInterval;
 var speed = 3000;

 //Assign a timer, so it will run periodically
 slideShowInterval = setInterval(changePosition, speed);

 slides.wrapAll('<div id="slidesHolder"></div>');

 slides.css({ 'float': 'left' });

 //set #slidesHolder width equal to the total width of all the slides
 $('#slidesHolder').css('width', slideWidth * numberOfSlides);

 $('#slideShowWindow')
 .prepend('<span class="slideNav" id="leftNav">Move Left</span>')
 .append('<span class="slideNav" id="rightNav">Move Right</span>');

 manageNav(currentPosition);

 //tell the buttons what to do when clicked
 $('.slideNav').bind('click', function () {

 //determine new position
 currentPosition = ($(this).attr('id') === 'rightNav')
 ? currentPosition + 1 : currentPosition - 1;

 //hide/show controls
 manageNav(currentPosition);
 clearInterval(slideShowInterval);
 slideShowInterval = setInterval(changePosition, speed);
 moveSlide();
 });

 function manageNav(position) {
 //hide left arrow if position is first slide
 if (position === 0) {
 $('#leftNav').hide();
 }
 else {
 $('#leftNav').show();
 }
 //hide right arrow is slide position is last slide
 if (position === numberOfSlides - 1) {
 $('#rightNav').hide();
 }
 else {
 $('#rightNav').show();
 }
 }


 //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
 function changePosition() {
 if (currentPosition === numberOfSlides - 1) {
 currentPosition = 0;
 manageNav(currentPosition);
 } else {
 currentPosition++;
 manageNav(currentPosition);
 }
 moveSlide();
 }


 //moveSlide: this function moves the slide 
 function moveSlide() {
 $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
 }

});
1
ответ дан M_Griffiths 14 October 2014 в 13:41
поделиться
Другие вопросы по тегам:

Похожие вопросы: