Эпиграф в стиле tumblr (перевод windymind)
Собственно, смысл простой - сделать слайдер, который менял бы содержимое по нажатию кнопок вправо и влево (на форумах их целая туча).
1. Кидаем непонятный яваскрипт в хтмл-низ и забываем о нём:
<script>
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert left and right arrow controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Move left</span>')
.append('<span class="control" id="rightControl">Move right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl')
? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() }
else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() }
else{ $('#rightControl').show() }
}
});
</script>2. В объявление или в хтмл-верх кидаем разметку слайдера:
<!-- Slideshow HTML -->
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
содержимое
</div>
<div class="slide">
содержимое
</div>
</div>
</div>
<!-- Slideshow HTML -->Тут всё очень просто. Просто дублируете сколько вам нужно раз вот это вот:
<div class="slide">
содержимое
</div>
Заполняете чем угодно. Изображениями, текстом. Можете даже новые дивы туда поставить, в общем, всё, что душе угодно.
3. Во второе окно CSS, в самое начало, ставите это:
/* Слайдер */
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:absolute;
margin-top: 200px;
margin-left: 500px;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels to avoid horizontal scroll */
height:263px;
}
.control {
display:block;
width:78px;
height:56px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
margin-top:300px;
margin-left:430px;
background:transparent url(адрес) no-repeat 0 0;
}
#rightControl {
margin-top:300px;
margin-left:1000px;
background:transparent url(адрес) no-repeat 0 0;
}
/* Конец слайдера */Пояснения:
#slideshow #slidesContainer {
margin:0 auto;
width:560px; - ширина слайдера
height:263px; - высота слайдера
overflow:auto; /* allow scrollbar */
position:absolute;
margin-top: 200px; - отступ сверху
margin-left: 500px; - отступ со стороны (чем выше значение, тем он правее будет)
}
Это общие настройки слайдера. Комментарии в цитате.
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels to avoid horizontal scroll */
height:263px;
}
Содержимое слайдера. Высота и ширина должны быть немного меньше высоты и ширины, которую вы установили для всего слайдера (чтобы содержимое не выходило за рамки, особенного это заметно при общим фоне или при рамке). Комментарии, думаю, излишни.
.control {
display:block;
width:78px; - ширина кнопок
height:56px; - высота кнопок
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
Общие настройки для кнопок переключения (вправо, влево). Комментарии в цитате.
#leftControl { - левый переключатель
margin-top:300px; - отступ сверху
margin-left:430px; - отступ со стороны
background:transparent url(адрес) no-repeat 0 0;
}
#rightControl { - правый переключатель
margin-top:300px; - отступ сверху
margin-left:1000px; - отступ со стороны
background:transparent url(адрес) no-repeat 0 0;
}
По сути, это всё. При настройке не забывайте, что левый переключатель отображается лишь после нажатия на правый (самый первый слайд является самым левым, и первое переключение идёт на право). Можете вставлять как есть, поставив переключатели и заполнив чем-то контейнеры, и уже дальше настраивать под дизайн. Если будут какие-то проблемы, обращайтесь - исправим.
P.S. Кстати, в самом начале яваскрипта есть такая цифра, как "560". Это указывается ширина всего слайдера. Я не помню, реагирует ли это на то, что мы указываем в ксс, но, если не будет меняться ширина, просто синхронизируйте (укажите и там ширину) с настройками в ксс.
