Jump to content

У меня вопрос по html для чайников с невыросшим носиком


Recommended Posts

Есть слайдер на сайте

		<amp-carousel width="450" height="300" layout="responsive" type="slides" loop="" id="wizard-carouselsbxJ62ccHm" on="slideChange:AMP.setState({selectedsbxJ62ccHm: {slide: event.index}})" data-autoplay="true" data-delay="3000" autoplay="" delay="3000">
			<div class="item slider-image mbr-flex">
				<div class="item-wrapper">
					<amp-img src="assets/images/destination-min-506x337.jpeg" layout="responsive" width="450.4451038575668" height="300" alt="image" class="placeholder-loader lb-image">
						<span class="mbr-text mbr-fonts-style display-7">
							Предназначение: где мы находимся и куда наступать</span>
						<div placeholder="" class="placeholder">
                                <div class="mobirise-spinner">
                                    <em>Предназначение</em>
                                    <em>Где мы находимся и куда наступать</em>
                                    <em>Причина, по которой я просыпаюсь</em>
                                </div></div>
						
					</amp-img>
				</div>
			</div><div class="item slider-image mbr-flex">
				<div class="item-wrapper">
					<amp-img src="assets/images/-min-640x426.jpg" layout="responsive" width="450.70422535211264" height="300" alt="image" class="placeholder-loader lb-image">
						<span class="mbr-text mbr-fonts-style display-7">
							Управление временем и задачами: насколько вы эффективны?</span>
						<div placeholder="" class="placeholder">
                                <div class="mobirise-spinner">
                                    <em>Управление временем и задачами</em>
                                    <em>Насколько вы эффективны?</em>
                                    <em></em>
                                </div></div>
						
					</amp-img>
				</div>
			</div><div class="item slider-image mbr-flex">
				<div class="item-wrapper">
					<amp-img src="assets/images/mbr-1920x1371.jpg" layout="responsive" width="420.13129102844636" height="300" alt="image" class="placeholder-loader lb-image">
						<span class="mbr-text mbr-fonts-style display-7">
							Целеполагание: что происходит и как на это повлиять?</span>
						<div placeholder="" class="placeholder">
                                <div class="mobirise-spinner">
                                    <em>Целеполагание</em>
                                    <em>Что происходит?</em>
                                    <em>что происходит</em>
                                </div>Как на это повлиять?</div>
						
					</amp-img>
				</div>
			</div><div class="item slider-image mbr-flex">
				<div class="item-wrapper">
					<amp-img src="assets/images/-min-640x426.jpg" layout="responsive" width="450.70422535211264" height="300" alt="image" class="placeholder-loader lb-image">
						<span class="mbr-text mbr-fonts-style display-7">
							Интернетмаркетинг: страшное слово?</span>
						<div placeholder="" class="placeholder">
                                <div class="mobirise-spinner">
                                    <em>Интернетмаркетинг</em>
                                    <em>Интернетмаркетинг - это искусство изъятия денег из населения в интернете</em>
                                    <em></em>
                                </div></div>
						
					</amp-img>
				</div>
			</div><div class="item slider-image mbr-flex">
				<div class="item-wrapper">
					<amp-img src="assets/images/-min-640x348.jpg" layout="responsive" width="551.7241379310344" height="300" alt="image" class="placeholder-loader lb-image">
						<span class="mbr-text mbr-fonts-style display-7">
							Продажи и переговоры</span>
						<div placeholder="" class="placeholder">
                                <div class="mobirise-spinner">
                                    <em>Продажи</em>
                                    <em>Переговоры</em>
                                    <em></em>
                                </div></div>
						
					</amp-img>
				</div>
			</div><div class="item slider-image mbr-flex">
				<div class="item-wrapper">
					<amp-img src="assets/images/web-master-min-640x426.jpg" layout="responsive" width="450.70422535211264" height="300" alt="image" class="placeholder-loader lb-image">
						<span class="mbr-text mbr-fonts-style display-7">
							Вебмастерство: секреты из тайника</span>
						<div placeholder="" class="placeholder">
                                <div class="mobirise-spinner">
                                    <em>Вебмастер</em>
                                    <em>Копирайтер</em>
                                    <em>Вебдизайнер</em>
                                </div></div>
						
					</amp-img>
				</div>
			</div>
			
			
		</amp-carousel>

это слайдер. Надо в этом слайдере сделать картинки кликабельными. Кто подскажет куда и какой код вставить, чтобы слайдер стал кликабельным. Можно даже в ЛС. Спасибо.

Link to post
Share on other sites

Здравствуйте.

По идее Вам требуется обернуть картинку в тег <a>:

<a href="http://google.com">
	<amp-img src="assets/images/destination-min-506x337.jpeg" layout="responsive" width="450.4451038575668" height="300" alt="image" class="placeholder-loader lb-image">
</a>

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Content

    • By Darya
      Ребята, всем доброго времени суток) Помогите пожалуйста со слайдером! В  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"; } Прошу не судить строго, я только в начале своего пути))
      Буду очень благодарна, за помощь!!

    • By Takono
      Здравствуйте. Создан слайдер из трёх слайдов. На слое над слайдером с помощью :before создан контент (один блок, содержащий текст, меню со ссылками и форму). Однако при адаптации под разные разрешения всё очень сильно съезжает и искажается. Есть ли какой-то более рациональный способ разместить слой с контентом над слайдером, чтобы слайды переключались под недвижимым контентом? Подскажите пожалуйста.
      id="main" это блок, который находится в слое над id="slider"
       
      index.html
      style.css
    • By Bubunt
      Здравствуйте, вопрос к уважаемым специалистам. Только приступил к изучению html+css. Знаю что можно реализовать такой слайдер на чистом html+css, но мне интересно, как сделать такой слайдер с помощью OWL Carousel 2? В частности, как правильно для данной секции написать html код и как правильно прописать стили для слайдера?  
      По одному ролику на YouTube получилось сделать так, дальше моих знаний уже не хватает. Отмечу, что делаю разметку страницы, до написания стилей еще не доходил. Вот мой код данной разметки, а тут макет.
      Буду благодарен за помощь, так как застрял именно со слайдером, во всей остальной разметке вроде разобрался.
  • Member Statistics

    46,971
    Total Members
    1,451
    Most Online
    Morwinus
    Newest Member
    Morwinus
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Свежие Темы

  • Последние сообщения

    • Первые шаги в облаке: наглядная инструкция по работе на виртуальном сервере Друзья, привет. Нередко сразу после перехода в облако возникают вопросы: как осуществить основные настройки на сервере и работать непосредственно с самой виртуальной машиной и панелью управления сервером? Мы подготовили пошаговую наглядную инструкцию для простого и понятного старта работы с виртуальной машиной https://tucha.ua/ru/blog/support/pervye-shagi-v-oblake-naglyadnaya-instrukciya-po-rabote-na-virtualnom-servere. Из статьи вы узнаете о том, как: ·       получить реквизиты доступа к машине; ·       подключиться к серверу; ·       изменить пароль; ·       установить обновления; ·       распределить дисковое пространство и о других полезных возможностях, которые помогут грамотно использовать сервер для насущных потребностей бизнеса. Инструкция пригодится, если вы только начали или вскоре планируете работу в облаках. Пользуйтесь! А если возникнут дополнительные вопросы или нужна наша помощь, обращайтесь: пишите на почту sales@tucha.ua или звоните по телефону +380 44 583-5-583. Мы на связи 24×7!      
    • Спасибо конечно но мне дешевле сделали. Скопировали + настроили заявки + установили панель управления. Счетчик метрики поставили бесплатно. Правда я и сам бы смог поставить счетчик это же минутное дело.  
    • Давненько от нас не было интересных новостей, поэтому возвращаемся с интересной акцией! 🙂 При заказе VPS сервера в период с 24 по 30 октября получайте скидку 50% на заказ услуг:  Сингл Мастер - 2Gb RAM, 20GB SSD, 2 vCore - цена по скидке 299 руб. Тим Спирит - 4Gb RAM, 40GB SSD, 3 vCore - цена по скидке 595 руб. Суприм Мастер - 6Gb RAM, 40GB SSD, 4 vCore - цена по скидке 895 руб. Black Titan - 8Gb RAM, 60GB SSD, 5 vCore - цена по скидке 1270 руб. Silver Oversun - 12Gb RAM, 80GB SSD, 6 vCore - цена по скидке 1795 руб. Gold Reserve - 16Gb RAM, 100GB SSD, 7 vCore - цена по скидке 2270 руб. Only Platinum - 32Gb RAM, 120GB SSD, 8 vCore - цена по скидке 3395 руб. ...и все его дополнения: дополнительный объем SSD/SAS, CPU, RAM, IP-адреса! Скидка 50% действует на аренду сервера на первые 3-х месяца, далее по обычной цене.   Промо-код: TMXJOS5 Все VPS сервера размещаются на SSD накопителях и процессорах Intel Xeon E5-2695v2. Дата-центр Санкт-Петербург. Добро пожаловать в SerfStack.com!
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...