Darya

Ребята, помогите пожалуйста со слайдером!!!

Recommended Posts

Ребята, всем доброго времени суток) Помогите пожалуйста со слайдером! В  javascript плохо разбираюсь((

Нашла подходящее мне решение, но никак не могу настроить под себя.

Нашла здесь: http://lantana-studio.ru/howto/simpleslider/

У меня содержимое слайдера вылезло из контейнера, фото прикреплю

Вот код HTML

<div class="slider">
			<div class="slider__block d-flex__row">
			  	<div class="">
			  		<img src="img/otziv-img.png" alt="Фото" class="slider__img">
			  	</div>
			  	<div class="slider__block_text">
			  		<div class="slider__block_text-row d-flex__widthHeight-center">
			  			<p class="slider__block_fio">
			  				1Диана Апасова
			  			</p>
			  			<p class="slider__block_vk">
			  				vk.com/apasova
			  			</p>
			  			<p class="slider__block_place">
			  				Москва → София
			  			</p>
			  		</div>
			  		<div class="slider__block_text-description">
			  			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
			  		</div>
			  	</div>
			</div>
			<div class="slider__block d-flex__row">
			  	<div class="">
			  		<img src="img/otziv-img.png" alt="Фото" class="slider__img">
			  	</div>
			  	<div class="slider__block_text">
			  		<div class="slider__block_text-row d-flex__widthHeight-center">
			  			<p class="slider__block_fio">
			  				2Диана Апасова
			  			</p>
			  			<p class="slider__block_vk">
			  				vk.com/apasova
			  			</p>
			  			<p class="slider__block_place">
			  				Москва → София
			  			</p>
			  		</div>
			  		<div class="slider__block_text-description">
			  			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
			  		</div>
			  	</div>
			</div>
			<div class="slider__block d-flex__row">
			  	<div class="">
			  		<img src="img/otziv-img.png" alt="Фото" class="slider__img">
			  	</div>
			  	<div class="slider__block_text">
			  		<div class="slider__block_text-row d-flex__widthHeight-center">
			  			<p class="slider__block_fio">
			  				3Диана Апасова
			  			</p>
			  			<p class="slider__block_vk">
			  				vk.com/apasova
			  			</p>
			  			<p class="slider__block_place">
			  				Москва → София
			  			</p>
			  		</div>
			  		<div class="slider__block_text-description">
			  			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
			  		</div>
			  	</div>
			</div>
			<a class="prev" onclick="minusSlide()"></a>
    		<a class="next" onclick="plusSlide()"></a>
		</div>
		<div class="slider-dots">
    		<span class="slider-dots_item" onclick="currentSlide(1)"></span> 
    		<span class="slider-dots_item" onclick="currentSlide(2)"></span> 
    		<span class="slider-dots_item" onclick="currentSlide(3)"></span> 
		</div>

CSS

.slider {
	position: relative;
}

.slider__block {
	width: 840px;
	height: 200px;
	margin: 0px auto;
	padding: 10px 20px;
	box-shadow: 0 5px 8px -5px #000;
}

.slider__img {
	margin: 20px 20px 0px 0px;
}

.slider__block_text {
	margin-top: 15px;
}

.slider__block_fio {
	text-transform: uppercase;
	font-size: 1.067rem;
	font-family: 'MuseoSansCyrl-900';
	margin-right: 33px;
	margin-left: -64px;
}

.slider__block_vk {
	text-transform: uppercase;
	font-size: 0.8rem;
	font-family: 'MuseoSansCyrl-900';
	margin-right: 140px;
	color: #23aae2;
	border-bottom: 2px solid #cce6f6;
}

.slider__block_place {
	text-transform: uppercase;
	font-size: 0.8rem;
	font-family: 'MuseoSansCyrl-100';
	color: #3eb0e4;
}

.slider__block_text-description {
	font-size: 0.933rem;
	font-family: 'MuseoSansCyrl-100Italic';
	color: #363636;
}

/* Кнопки вперед и назад */
.slider .prev, .slider .next {
    cursor: pointer;
    position: absolute;
    top: 0;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: #000;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}
.slider .next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
/* При наведении на кнопки добавляем фон кнопок */
.slider .prev:hover,
.slider .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Кружочки */
.slider-dots {
    text-align: center;
    margin-top: 20px;
}
.slider-dots_item{
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 2px;
    background-color: #ddd;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.active,
.slider-dots_item:hover {
    background-color: #aaa;
}
/* Анимация слайдов */
.slider .slider__block {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}
@-webkit-keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}
@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

JS

/* Индекс слайда по умолчанию */
var slideIndex = 1;
showSlides(slideIndex);

/* Функция увеличивает индекс на 1, показывает следующй слайд*/
function plusSlide() {
    showSlides(slideIndex += 1);
}

/* Функция уменьшяет индекс на 1, показывает предыдущий слайд*/
function minusSlide() {
    showSlides(slideIndex -= 1);  
}

/* Устанавливает текущий слайд */
function currentSlide(n) {
    showSlides(slideIndex = n);
}

/* Основная функция слайдера */
function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("slider__block");
    var dots = document.getElementsByClassName("slider-dots_item");
    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace("active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += "active";
}

Прошу не судить строго, я только в начале своего пути))

Буду очень благодарна, за помощь!!

sl.jpg

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Super_Saimo
      Добрый день! Столкнулся с проблемой отображения информации из localStorage после перезагрузки страниц. Делаю to do list, добавление тасков, удаление проходит нормально, добавляются элементы в localStorage, но после перезагрузки список тасков пуст на странице.  Сам код https://jsfiddle.net/zdbmsjv2/ Извиняюсь за чрезмерное количество комментариев. Писал для себя, чтобы не забыть потом. 
    • By Evsey
      Доброго дня всем матерым верстальщикам.
      Есть задача сделать табличку графика на сайт. Технологии - понятно, что html и css. Табличка не большая, но с особенностями.
      А именно, в табличке есть группы объединенных ячеек, при чем не только внутри строк, но и между строками (объединяется несколько строк). Табличку прикрепил.
      Каркас table tr td без объединения ячеек могу сделать, но нужно объединить.
      Как правильнее всего сделать такое объединение? Было бы классно, чтобы ответ был сразу с примерами.

    • By AlexGreat
      Здравствуйте ! Имеется принципиальный вопрос о выравнивании внутри блока шрифтовой иконки . Вопрос трудно объяснить с помощью текста, поэтому прикрепляю видеовопрос для наглядности - (видео чуть более минуты). 
      https://drive.google.com/open?id=1zHWLnroXsaO5TocvUt07Wv6DHauZdBqJ
      Заранее спасибо за ответ! 
  • Member Statistics

    46,340
    Total Members
    3,128
    Most Online
    Someone
    Newest Member
    Someone
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.