В проекте использовала вот такой слайдер:
heavenweb.ru/delaem-prostoy-slayder-na-jquery
Достаточно простой. Просто стилизовала его как мне нужно, все отлично работает.
Теперь поменялся дизайн, и сверху слайдера добавились ссылочки, кликая по которым слайдер должен отправлять меня на определенный слайд - т.е. если кликнуть на отзывы, должен появиться слайд с отзывами, и все в таком духе.
Вот сам слайдер.
Вот html код:
<div id="slider-wrap">
<div class="portfolio-wrapp">
<a сlass="portfolio-menu item-1">Услуги</a>
<a сlass="portfolio-menu item-2">Отзывы</a>
<a сlass="portfolio-menu item-3">Вопросы и ответы</a>
<a сlass="portfolio-menu item-4">Контакты</a>
</div>
<div id="slider">
<div class="slide"><div class="slider-img"><img src="img/contacts-portfolio-gohman-page.jpg"></div></div>
<div class="slide"><div class="slider-img"><img src="img/uslugi.jpg"></div></div>
<div class="slide"><div class="slider-img"><img src="img/questions.jpg"></div></div>
<div class="slide"><div class="slider-img"><img src="img/reviews.jpg"></div></div>
</div>
</div>
Вот код стилей(примерно):
#slider-wrap{ /* Оболочка слайдера и кнопок */
width:976px;
margin: auto
}
#slider{ /* Оболочка слайдера */
width:976px;
height:600px;/*670 630*/
overflow: hidden;
position:relative;
}
.slide{ /* Слайд */
width:100%;
height:100%;
}
.sli-links { /* Кнопки смены слайдов */
margin-top:10px;
text-align:center;
}
.sli-links .control-slide{
margin:2px;
display:inline-block;
width:16px;
height:16px;
overflow:hidden;
text-indent:-9999px;
background:url(../img/radioBg.png) center bottom no-repeat;
}
.sli-links .control-slide:hover{
cursor:pointer;
background-position:center center;
}
.sli-links .control-slide.active{
background-position:center top;
}
#prewbutton, #nextbutton{ /* Ссылка "Следующий" и "Педыдущий" */
display:block;
/*width:15px;*/
height:100%;
width:85px;
position:absolute;
top:0;
overflow:hidden;
text-indent:-999px;
background:url(../img/prev.png) left center no-repeat;
opacity:0.8;
z-index:3;
outline:none !important;
}
#prewbutton{
left:10px;
}
#nextbutton{
right:10px;
background:url(../img/next.png) right center no-repeat;}
#prewbutton:hover, #nextbutton:hover{
opacity:1;
}
.slider-img{
width: 665px;
margin: auto;
/*margin-top: 60px;*/
height:600px;
overflow: hidden;
box-shadow: 0 3px 3px 3px rgba(221, 221, 221, 1);
margin-top: 3px;
}
.slider-img img{
width: 665px;
}
.portfolio-wrapp{
text-align: center;
margin-bottom: 10px;
}
.portfolio-wrapp a{
color:red;
display: inline-block;
margin-right: 70px;
font-family: Calibri;
border-bottom:1px dashed #000;
color: #000000;
}
.portfolio-wrapp a:active,
.portfolio-wrapp a:hover {
color:#eb643d;
border-bottom: 1px dashed #eb643d;
cursor: pointer;
}
.portfolio-wrapp a:last-child{
margin-right: 0px
}
вот код скрипта:
(function ($) {
var hwSlideSpeed = 500;
var hwTimeOut = 10000;
var hwNeedLinks = true;
$(document).ready(function(e) {
$('.slide').css(
{"position" : "absolute",
"top":'0', "left": '0'}).hide().eq(0).show();
var slideNum = 0;
var slideTime;
slideCount = $("#slider .slide").size();
var animSlide = function(arrow){
clearTimeout(slideTime);
$('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
if(arrow == "next"){
if(slideNum == (slideCount-1)){slideNum=0;}
else{slideNum++}
}
else if(arrow == "prew")
{
if(slideNum == 0){slideNum=slideCount-1;}
else{slideNum-=1}
}
else{
slideNum = arrow;
}
$('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
$(".control-slide.active").removeClass("active");
$('.control-slide').eq(slideNum).addClass('active');
}
if(hwNeedLinks){
var $linkArrow = $('<a id="prewbutton" href="#"><</a><a id="nextbutton" href="#">></a>')
.prependTo('#slider');
$('#nextbutton').click(function(){
animSlide("next");
return false;
})
$('#prewbutton').click(function(){
animSlide("prew");
return false;
})
}
var $adderSpan = '';
$('.slide').each(function(index) {
$adderSpan += '<span class = "control-slide">' + index + '</span>';
});
/*$('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap');*/
$(".control-slide:first").addClass("active");
$('.control-slide').click(function(){
var goToNum = parseFloat($(this).text());
animSlide(goToNum);
});
var pause = false;
var rotator = function(){
if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
}
$('#slider-wrap').hover(
function(){clearTimeout(slideTime); pause = true;},
function(){pause = false; rotator();
});
rotator();
});
})(jQuery);
Вот ссылка на гит:
https://github.com/MarinaTro/slider
Потихоньку учу js, не все дается так легко. Буду благодарна за помощь! Заранее спасибо!
Простой
