@eellazy

Почему верстка слайдера едет?

Всем привет. Подскажите в чем может быть проблема?
Фото слайдера размещаются один за другим, по одному в ряд.. Нужно что бы они пролистывались. Уже всю голову переломал. И никак не могу найти в чем проблема

da228b55dc584e1e98fb49a623064daf.png
902c65c2856f444ebceaa16841b46c27

Вот код стили

<style type="text/css">
.carousel {
	float:left;
	width:600px;
	margin:0 0 10px;
}
.carousel li {
	float:left;
	height:200px;
}
.carousel h4 {
	font-size:16pt;
	font-weight:normal;
	text-align:left;
	line-height:28px;
	margin:0 0 20px;
}
.carousel h4 a {
	color:#a15091;
	text-decoration:none;
}
.carousel p {
	text-align:justify;
	line-height:20px;
}
.carousel img {
	float:left;
	width:190px;
	border:5px solid #efcfe9;
	margin-right:15px;
}
.prev, .next {
	display:block;
	float:left;
	width:42px;
	height:42px;
	margin-top:79px;
}
.prev {
	background:url(prev_next.png) no-repeat;
	margin-right:10px;
}
.next {
	background:url(prev_next.png) -44px 0 no-repeat;
	margin-left:10px;
}
.prev:hover {background:url(prev_next.png) 0 -44px no-repeat;}
.next:hover {background:url(prev_next.png) -44px -44px no-repeat;}
.go {margin:0 0 10px 47px;}
.go a {
	float:left;
	width:10px;
	height:11px;
	text-indent:-9999px;
	background:url(go.png) no-repeat;
	margin-left:5px;
}
.go a:hover {background-position:0 -11px;}
.go .goActive {background-position:0 -11px;}
</style>


И сам блок
<div class="prev"></div>
<div class="carousel">
	<ul>
		<li>
			<img src="img/01.jpg" alt="Как правильно наносить ухаживающие за лицом средства?" title="Как правильно наносить ухаживающие за лицом средства?" />
			<h4><a href="#">Как правильно наносить ухаживающие за лицом средства?</a></h4>
			<p>Косметическая индустрия сегодня предлагает огромное множество самой разной продукции по уходу за кожей лица, это кремы, гели, тоники, муссы, гоммажи, различные жидкости и многое другое. И важно не только приобрести необходимые для ухода за нежной кожей лица средства, но и правильно их использовать.</p>
		</li>
		<li>
			<img src="img/02.jpg" alt="Желтые ногти... как с этим бороться?" title="Желтые ногти... как с этим бороться?" />
			<h4><a href="#">Желтые ногти... как с этим бороться?</a></h4>
			<p>Когда у девушек и женщин желтеют ногти, то большинство относится к этой проблеме, как к косметической, а о нарушениях в организме – сердечнососудистых или эндокринных – думают в последнюю очередь. Понятно, что желтые ногти выглядят не просто некрасиво, но даже отталкивающе, так что мы стремимся быстрее решить проблему.</p>
		</li>
		<li>
			<img src="img/03.jpg" alt="Привычки, продлевающие жизнь!" title="Привычки, продлевающие жизнь!" />
			<h4><a href="#">Привычки, продлевающие жизнь!</a></h4>
			<p>Для многих здоровый образ жизни ассоциируется с многочисленными запретами и тяжелым трудом над собой, а так хочется просто жить и радоваться этому без усилий и жестких ограничений. Конечно, каждый из нас понимает, что продолжительность жизни напрямую зависит от такого, как ты эту самую жизнь ведешь.</p>
		</li>
		<li>
			<img src="img/04.jpg" alt="Мыло своими руками!" title="Мыло своими руками!" />
			<h4><a href="#">Мыло своими руками!</a></h4>
			<p>Оказывается, изготовить мыло в домашних условиях может каждый. Это увлекательное занятие открывает необъятные горизонты для творчества, кроме того, таким способом можно изготовить необычный и эксклюзивный подарок близким людям. А для кого-то домашнее изготовление мыла может стать и приносящим доход бизнесом.</p>
		</li>
		<li>
			<img src="img/05.jpg" alt="Американские горки Мартина Катана! -3-7кг за 3 недели!" title="Американские горки Мартина Катана! -3-7кг за 3 недели!" />
			<h4><a href="#">Американские горки Мартина Катана! -3-7кг за 3 недели!</a></h4>
			<p>Диета под названием американские горки Мартина Катана существует уже более тридцати лет, и за это время она прошла проверку множеством женщин, которые убедились в ее эффективности. Поэтому, заслужив всеобщее доверие, эта диета стала верной спутницей женщин, стремящихся к совершенству.</p>
		</li>
		<li>
			<img src="img/06.jpg" alt="Побалуй себя и своего мужчину!" title="Побалуй себя и своего мужчину!" />
			<h4><a href="#">Побалуй себя и своего мужчину!</a></h4>
			<p>Подарить любимому человеку фантастическую ночь или вечер не стоит большого труда. Для начала купите себе хотя бы один эротический наряд и научитесь в нем правильно ходить и двигаться по дому. Долой халат и домашний костюм. Устройте себе маленький праздник.</p>
		</li>
		<li>
			<img src="img/07.jpg" alt="Эффективный ароматический массаж!" title="Эффективный ароматический массаж!" />
			<h4><a href="#">Эффективный ароматический массаж!</a></h4>
			<p>О полезных свойствах эфирных масел известно, пожалуй, каждому. Они обладают успокаивающими и расслабляющими свойствами, увлажняют и разглаживают кожу, лечат воспалительные процессы. Именно благодаря этим качествам натуральные эфирные масла используются для массажа.</p>
		</li>
	</ul>
</div>
<div class="next"></div>
<div style="clear:both;"></div>
<div class="go">
	<a href="#" onclick="" class="1 goActive">1</a>
	<a href="#" onclick="" class="2">2</a>
	<a href="#" onclick="" class="3">3</a>
	<a href="#" onclick="" class="4">4</a>
	<a href="#" onclick="" class="5">5</a>
	<a href="#" onclick="" class="6">6</a>
	<a href="#" onclick="" class="7">7</a>
</div>
  • Вопрос задан
  • 235 просмотров
Пригласить эксперта
Ответы на вопрос 1
Здравствуйте.
1. Не совсем понятен вопрос.
2. Пользуйтесь jsfiddle.net. Так вам быстрее ответят.
3. Если ваш вопрос состоит в том, как заставить слайдер двигаться, то, я тут набросал пример, используя ваши исходники. Пример. Я убрал prev_button и next_button, если поймёте главный принцип, то, уверен, допиши без труда сами.
Принцип работы: Создаём длинный ряд из всех 7 слайдов и с помощью js изменяем right ul, тем самым как бы двигая весь ряд вдоль "окна", и, смотря через "окно", а "окном", в нашем случае, является блок carousel создаётся эффект карусели, Если я прав на счёт вашего вопроса, и у вас остались вопросы, пишите :)

P.S. Наверняка местные умельцы на мой js код без слёз не взглянут(мне и самому стыдно). Я был бы очень рад, если бы вы указали на все недочёты.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SummerWeb Ярославль
от 120 000 до 180 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
02 июн. 2024, в 01:13
2000 руб./за проект
01 июн. 2024, в 23:49
50000 руб./за проект
01 июн. 2024, в 23:20
30000 руб./за проект