Доброго времени суток, друзья. Сегодня у меня для вас 2 варианта слайдера для изображений. По задумке они будут располагаться в гаджете над шапкой блога или под ней. Несмотря на то, что коды каждого кажутся громоздкими, они вполне себе легко настраиваемые и лёгкие в использовании.
Вариант 1.
Слайдер без подключения библиотеки jquery. Идёт плавная смена картинок. При наведении курсора на сам слайдер приостанавливается смена изображений, при клике на кнопку, которые вверху, тоже. При желании можно сделать каждую картинку кликабельной, с переходом на нужную страницу. Слайдер резиновый, подойдёт под любой экран. Готовый код рассчитан на 5 слайдов, но при необходимости можно добавить или удалить.
Как он работает можно увидеть в этом редакторе. Скопируйте код и вставьте в поле.

Код
<div id="odin">
<img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="природа южного урала"/>
<img src="http://s3.fotokto.ru/photo/full/443/4437167.jpg" alt="природа южного урала"/>
<img src="http://rasfokus.ru/images/photos/medium/3d0d8cf8cdc2c83ea5b13d45e24225b1.jpg" alt="природа южного урала"/>
<img src="https://i08.fotocdn.net/s113/509da19195574f18/public_pin_l/2556954570.jpg" alt="природа южного урала"/>
<img src="http://s4.fotokto.ru/photo/full/563/5639963.jpg" alt="природа южного урала"/>
<div>
<button type="button" value="0">1</button>
<button type="button" value="1">2</button>
<button type="button" value="2">3</button>
<button type="button" value="3">4</button>
<button type="button" value="4">5</button>
</div>
</div>
<style>
#odin {
position: relative;
max-width: 100%; /* можно ограничить ширину в px */
max-height: 340px; /* можно ограничить высоту в px */
overflow: hidden;
}
#odin img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
bottom: 0;
right: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
outline: 300px solid #fff;
}
#odin div {
position: relative;
height: 0;
margin-bottom: 60%;
z-index: 3;
}
#odin img:nth-of-type(1) {
z-index: 2;
}
#odin button:nth-of-type(1) {
opacity: 0.4;
}
</style>
<script>
window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
function (callback) {
return window.setTimeout(callback, 1000 / 60);
};
})();
function slider(f, img, button, V, Vo) {
var iii = 0,
start = null,
clear = 0;
function step(time) {
if (start === null) start = time;
var progress = time - start;
if (progress > V) {
start = null;
for (var i=0; i<img.length; i++) {
img[i].style.zIndex = "0";
button[i].style.opacity = "1";
}
img[iii].style.zIndex = "1";
iii = ((iii != (img.length - 1)) ? (iii + 1) : 0);
img[iii].style.zIndex = "2";
img[iii].style.opacity = "0";
button[iii].style.opacity = ".4";
} else if(img[iii].style.opacity != "") {
img[iii].style.opacity = ((progress/Vo < 1) ? (progress/Vo) : 1);
}
if(clear != "0" && progress > Vo) {} else {requestAnimationFrame(step);}
}
requestAnimationFrame(step);
f.onmouseenter = function() { if(clear == "0") clear = "1"; }
f.onmouseleave = function() { if(clear == "1") {clear = "0"; requestAnimationFrame(step);} }
for (var j=0; j<button.length; j++) {
button[j].onclick = function() {
clear = "2";
for (var i=0; i<img.length; i++) {
img[i].style.zIndex = "0";
}
img[this.value].style.zIndex = "2";
img[this.value].style.opacity = "1";
for (var k=0; k<button.length; k++) {
button[k].style.opacity = ((button[k] == this) ? '.4' : '1');
}
}
}
}
var f = document.getElementById('odin'),
img = f.getElementsByTagName('img'),
button = f.getElementsByTagName('div')[0].getElementsByTagName('button');
slider(f, img, button, '4000', '1000'); // '2000' — скорость смены картинок, '1000' — скорость прозрачности
</script>
<img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="природа южного урала"/>
<img src="http://s3.fotokto.ru/photo/full/443/4437167.jpg" alt="природа южного урала"/>
<img src="http://rasfokus.ru/images/photos/medium/3d0d8cf8cdc2c83ea5b13d45e24225b1.jpg" alt="природа южного урала"/>
<img src="https://i08.fotocdn.net/s113/509da19195574f18/public_pin_l/2556954570.jpg" alt="природа южного урала"/>
<img src="http://s4.fotokto.ru/photo/full/563/5639963.jpg" alt="природа южного урала"/>
<div>
<button type="button" value="0">1</button>
<button type="button" value="1">2</button>
<button type="button" value="2">3</button>
<button type="button" value="3">4</button>
<button type="button" value="4">5</button>
</div>
</div>
<style>
#odin {
position: relative;
max-width: 100%; /* можно ограничить ширину в px */
max-height: 340px; /* можно ограничить высоту в px */
overflow: hidden;
}
#odin img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
bottom: 0;
right: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
outline: 300px solid #fff;
}
#odin div {
position: relative;
height: 0;
margin-bottom: 60%;
z-index: 3;
}
#odin img:nth-of-type(1) {
z-index: 2;
}
#odin button:nth-of-type(1) {
opacity: 0.4;
}
</style>
<script>
window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
function (callback) {
return window.setTimeout(callback, 1000 / 60);
};
})();
function slider(f, img, button, V, Vo) {
var iii = 0,
start = null,
clear = 0;
function step(time) {
if (start === null) start = time;
var progress = time - start;
if (progress > V) {
start = null;
for (var i=0; i<img.length; i++) {
img[i].style.zIndex = "0";
button[i].style.opacity = "1";
}
img[iii].style.zIndex = "1";
iii = ((iii != (img.length - 1)) ? (iii + 1) : 0);
img[iii].style.zIndex = "2";
img[iii].style.opacity = "0";
button[iii].style.opacity = ".4";
} else if(img[iii].style.opacity != "") {
img[iii].style.opacity = ((progress/Vo < 1) ? (progress/Vo) : 1);
}
if(clear != "0" && progress > Vo) {} else {requestAnimationFrame(step);}
}
requestAnimationFrame(step);
f.onmouseenter = function() { if(clear == "0") clear = "1"; }
f.onmouseleave = function() { if(clear == "1") {clear = "0"; requestAnimationFrame(step);} }
for (var j=0; j<button.length; j++) {
button[j].onclick = function() {
clear = "2";
for (var i=0; i<img.length; i++) {
img[i].style.zIndex = "0";
}
img[this.value].style.zIndex = "2";
img[this.value].style.opacity = "1";
for (var k=0; k<button.length; k++) {
button[k].style.opacity = ((button[k] == this) ? '.4' : '1');
}
}
}
}
var f = document.getElementById('odin'),
img = f.getElementsByTagName('img'),
button = f.getElementsByTagName('div')[0].getElementsByTagName('button');
slider(f, img, button, '4000', '1000'); // '2000' — скорость смены картинок, '1000' — скорость прозрачности
</script>
В строках, отмеченными жёлтым вставьте адреса ваших изображений.
Если необходимо сделать изображение кликабельным пишем так
<a href="здесь адрес страницы, на которую будет осуществлён переход.">Горы<img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="природа южного урала"/></a>
При дополнении картинки добавляем строку
<img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="природа южного урала"/>
При этом необходимо добавить соответственно и нумерацию
<button type="button" value="5">6</button>
Остальные настройки я дала в комментариях в коде.
Вариант 2.
Этот адаптивны слайдер с заголовком и описание картинок. Работает с подключением jquery. Я отметила первую строку красным цветом. Это и есть библиотека jquery. Скорее всего она уже подключена у вас в блоге. Тогда строку убрать нужно. Если нет, оставляйте код как есть.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="slider" class="slider">
<ol class="slider_indicators">
<li class="slider_indicator slider_indicator_active" data-slide-to="0"></li>
<li class="slider_indicator" data-slide-to="1"></li>
<li class="slider_indicator" data-slide-to="2"></li>
<li class="slider_indicator" data-slide-to="3"></li>
</ol>
<div class="slider_items">
<div class="slider_item slider_item_1 slider_item_active">
<div class="slider_text">
<h1>Природа Южного Урала</h1>
<h2>Подзаголовок </h2>
<p>Здесь будет анонс или краткое описание изображения</p>
</div>
<img src="https://i08.fotocdn.net/s113/509da19195574f18/public_pin_l/2556954570.jpg" alt="slide1" />
</div>
<div class="slider_item slider_item_2">
<div class="slider_text">
<h1>Заголовок слайда №2</h1>
<h2>Подзаголовок h2</h2>
<p>Здесь будет анонс или краткое описание изображения</p>
</div>
<img src="http://rasfokus.ru/images/photos/medium/3d0d8cf8cdc2c83ea5b13d45e24225b1.jpg" alt="slide2" />
</div>
<div class="slider_item slider_item_3">
<div class="slider_text">
<h1>Заголовок слайда №3</h1>
<h2>Подзаголовок h2</h2>
<p>Здесь будет анонс или краткое описание изображения</p>
</div>
<img src="http://s3.fotokto.ru/photo/full/443/4437167.jpg" alt="slide3" />
</div>
<div class="slider_item slider_item_4">
<div class="slider_text">
<h1>Заголовок слайда №4</h1>
<h2>Подзаголовок h2</h2>
<p>Здесь будет анонс или краткое описание изображения</p>
</div>
<img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="slide4" /></div>
</div>
</div>
<style>
.slider {position:relative;}
.slider_items{position:relative;width:100%;overflow:hidden;max-height:500px;}
.slider_item{position:relative;display:none;width:100%;transition: transform 0.6s ease;backface-visibility: hidden;overflow:hidden;}
.slider_item_active,.slider_item_next,.slider_item_prev{display:block;}
.slider_item_next,.slider_item_prev{position: absolute;top:0;}
.slider_item_next.slider_item_left,
.slider_item_prev.slider_item_right{transform: translateX(0);}
.slider_item_next,
.slider_item_right.slider_item_active{transform: translateX(100%);}
.slider_item_prev,
.slider_item_left.slider_item_active{transform: translateX(-100%);}
.slider_control{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:49%;color:#fff;opacity:.5;}
.slider_control:hover,
.slider_control:focus{opacity:1;}
.slider_control_prev{left:0;}
.slider_control_next{right:0;}
.slider_control::before {content: '';height:80px;width:19px;position:absolute;display:inline-block;background:transparent no-repeat center center;background-size: 100% 100%;}
.slider_indicators{position:absolute;right:0;bottom:10px;left:0;z-index:15;display:flex;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none;}
.slider_indicator{position: relative;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;border-radius:6px;}
.slider_indicator::before{position:absolute;top:-10px;left:0;display:inline-block;width:100%;height:10px;content:"";}
.slider_indicator::after{position:absolute;bottom:-10px;left:0;display:inline-block;width:100%;height:10px;content:"";}
.slider_indicator_active {background-color:#f00;}
.slider_items img{display:inline-block;height:auto;width:100%;vertical-align:bottom;}
.slider_text{z-index:3;position:absolute;top:10%;left:50%;margin-left:-400px;max-width:400px;}
.slider h1,.slider h2,.slider p{color:#fff;text-shadow:0 0 3px #000,0 0 10px #333;}
@media (max-width:1300px){
.slider_control_prev{left:5%;width:100px;}
.slider_control_next{right:5%;width:100px;}
}
@media (max-width:1050px){
.slider_text{top:10%;left:50%;margin-left:-200px;max-width:400px;}
}
@media (max-width:720px){
.slider_items{max-height:300px;}
.slider_items img{width:auto;height:100%;}
.slider_control_prev{display:none;}
.slider_control_next{display:none;}
.slider_text{top:1%;left:4%;right:4%;margin-left:0px;max-width:100%;}
}</style>
<script>
jQuery(document).ready(function($){
'use strict';
var slider=function(e){
const ClassName = {INDICATOR_ACTIVE: 'slider_indicator_active',ITEM: 'slider_item',ITEM_LEFT: 'slider_item_left',ITEM_RIGHT: 'slider_item_right',ITEM_PREV: 'slider_item_prev',ITEM_NEXT: 'slider_item_next',ITEM_ACTIVE: 'slider_item_active'}
var d=!1,u=0,i={},v={},I={},f={selector:"",isCycling:!0,direction:"next",interval:5e3,pause:!0},r=function(s){var n;return v.forEach(function(e,t){e===s&&(n=t)}),n},l=function(e,t,s){var n,a,i=ClassName.ITEM_RIGHT,r=ClassName.ITEM_PREV,l=v[t],c=v[s],o=function(){l.classList.remove(ClassName.ITEM_ACTIVE),l.classList.remove(i),c.classList.remove(r),c.classList.remove(i),c.classList.add(ClassName.ITEM_ACTIVE),window.setTimeout(function(){f.isCycling&&(clearInterval(u),C()),d=!1,l.removeEventListener("transitionend",o)},700)};d||(d=!0,"next"===e&&(i=ClassName.ITEM_LEFT,r=ClassName.ITEM_NEXT),c.classList.add(r),n=t,a=s,I.length===v.length&&(I[n].classList.remove(ClassName.INDICATOR_ACTIVE),I[a].classList.add(ClassName.INDICATOR_ACTIVE)),window.setTimeout(function(){c.classList.add(i),l.classList.add(i),l.addEventListener("transitionend",o)},0))},a=function(e){var t=i.querySelector("."+ClassName.ITEM_ACTIVE),s=r(t),n=v.length-1,a=0===s?n:s-1;"next"===e&&(a=s==n?0:s+1),l(e,s,a)},C=function(){f.isCycling&&(u=window.setInterval(function(){a(f.direction)},f.interval))},t=function(e){var t=i.querySelector("."+ClassName.ITEM_ACTIVE),s=r(t),n=e.target.getAttribute("data-slide-to");if(e.target.hasAttribute("data-slide-to")||e.target.classList.contains("slider_control"))if(e.target.hasAttribute("data-slide-to")){if(s===n)return;l(s<n?"next":"prev",s,n)}else e.preventDefault(),a(e.target.classList.contains("slider_control_next")?"next":"prev")};for(var s in e)s in f&&(f[s]=e[s]);return i="string"==typeof f.selector?document.querySelector(f.selector):f.selector,v=i.querySelectorAll("."+ClassName.ITEM),I=i.querySelectorAll("[data-slide-to]"),C(),i.addEventListener("click",t),f.pause&&f.isCycling&&(i.addEventListener("mouseenter",function(e){clearInterval(u)}),i.addEventListener("mouseleave",function(e){clearInterval(u),C()})),{next:function(){a("next")},prev:function(){a("prev")},stop:function(){clearInterval(u)},cycle:function(){clearInterval(u),C()}}}({
selector:".slider",
isCycling:true,
direction:"next",
interval:2000,
pause:false
});
});
</script>
<div id="slider" class="slider">
<ol class="slider_indicators">
<li class="slider_indicator slider_indicator_active" data-slide-to="0"></li>
<li class="slider_indicator" data-slide-to="1"></li>
<li class="slider_indicator" data-slide-to="2"></li>
<li class="slider_indicator" data-slide-to="3"></li>
</ol>
<div class="slider_items">
<div class="slider_item slider_item_1 slider_item_active">
<div class="slider_text">
<h1>Природа Южного Урала</h1>
<h2>Подзаголовок </h2>
<p>Здесь будет анонс или краткое описание изображения</p>
</div>
<img src="https://i08.fotocdn.net/s113/509da19195574f18/public_pin_l/2556954570.jpg" alt="slide1" />
</div>
<div class="slider_item slider_item_2">
<div class="slider_text">
<h1>Заголовок слайда №2</h1>
<h2>Подзаголовок h2</h2>
<p>Здесь будет анонс или краткое описание изображения</p>
</div>
<img src="http://rasfokus.ru/images/photos/medium/3d0d8cf8cdc2c83ea5b13d45e24225b1.jpg" alt="slide2" />
</div>
<div class="slider_item slider_item_3">
<div class="slider_text">
<h1>Заголовок слайда №3</h1>
<h2>Подзаголовок h2</h2>
<p>Здесь будет анонс или краткое описание изображения</p>
</div>
<img src="http://s3.fotokto.ru/photo/full/443/4437167.jpg" alt="slide3" />
</div>
<div class="slider_item slider_item_4">
<div class="slider_text">
<h1>Заголовок слайда №4</h1>
<h2>Подзаголовок h2</h2>
<p>Здесь будет анонс или краткое описание изображения</p>
</div>
<img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="slide4" /></div>
</div>
</div>
<style>
.slider {position:relative;}
.slider_items{position:relative;width:100%;overflow:hidden;max-height:500px;}
.slider_item{position:relative;display:none;width:100%;transition: transform 0.6s ease;backface-visibility: hidden;overflow:hidden;}
.slider_item_active,.slider_item_next,.slider_item_prev{display:block;}
.slider_item_next,.slider_item_prev{position: absolute;top:0;}
.slider_item_next.slider_item_left,
.slider_item_prev.slider_item_right{transform: translateX(0);}
.slider_item_next,
.slider_item_right.slider_item_active{transform: translateX(100%);}
.slider_item_prev,
.slider_item_left.slider_item_active{transform: translateX(-100%);}
.slider_control{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:49%;color:#fff;opacity:.5;}
.slider_control:hover,
.slider_control:focus{opacity:1;}
.slider_control_prev{left:0;}
.slider_control_next{right:0;}
.slider_control::before {content: '';height:80px;width:19px;position:absolute;display:inline-block;background:transparent no-repeat center center;background-size: 100% 100%;}
.slider_indicators{position:absolute;right:0;bottom:10px;left:0;z-index:15;display:flex;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none;}
.slider_indicator{position: relative;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;border-radius:6px;}
.slider_indicator::before{position:absolute;top:-10px;left:0;display:inline-block;width:100%;height:10px;content:"";}
.slider_indicator::after{position:absolute;bottom:-10px;left:0;display:inline-block;width:100%;height:10px;content:"";}
.slider_indicator_active {background-color:#f00;}
.slider_items img{display:inline-block;height:auto;width:100%;vertical-align:bottom;}
.slider_text{z-index:3;position:absolute;top:10%;left:50%;margin-left:-400px;max-width:400px;}
.slider h1,.slider h2,.slider p{color:#fff;text-shadow:0 0 3px #000,0 0 10px #333;}
@media (max-width:1300px){
.slider_control_prev{left:5%;width:100px;}
.slider_control_next{right:5%;width:100px;}
}
@media (max-width:1050px){
.slider_text{top:10%;left:50%;margin-left:-200px;max-width:400px;}
}
@media (max-width:720px){
.slider_items{max-height:300px;}
.slider_items img{width:auto;height:100%;}
.slider_control_prev{display:none;}
.slider_control_next{display:none;}
.slider_text{top:1%;left:4%;right:4%;margin-left:0px;max-width:100%;}
}</style>
<script>
jQuery(document).ready(function($){
'use strict';
var slider=function(e){
const ClassName = {INDICATOR_ACTIVE: 'slider_indicator_active',ITEM: 'slider_item',ITEM_LEFT: 'slider_item_left',ITEM_RIGHT: 'slider_item_right',ITEM_PREV: 'slider_item_prev',ITEM_NEXT: 'slider_item_next',ITEM_ACTIVE: 'slider_item_active'}
var d=!1,u=0,i={},v={},I={},f={selector:"",isCycling:!0,direction:"next",interval:5e3,pause:!0},r=function(s){var n;return v.forEach(function(e,t){e===s&&(n=t)}),n},l=function(e,t,s){var n,a,i=ClassName.ITEM_RIGHT,r=ClassName.ITEM_PREV,l=v[t],c=v[s],o=function(){l.classList.remove(ClassName.ITEM_ACTIVE),l.classList.remove(i),c.classList.remove(r),c.classList.remove(i),c.classList.add(ClassName.ITEM_ACTIVE),window.setTimeout(function(){f.isCycling&&(clearInterval(u),C()),d=!1,l.removeEventListener("transitionend",o)},700)};d||(d=!0,"next"===e&&(i=ClassName.ITEM_LEFT,r=ClassName.ITEM_NEXT),c.classList.add(r),n=t,a=s,I.length===v.length&&(I[n].classList.remove(ClassName.INDICATOR_ACTIVE),I[a].classList.add(ClassName.INDICATOR_ACTIVE)),window.setTimeout(function(){c.classList.add(i),l.classList.add(i),l.addEventListener("transitionend",o)},0))},a=function(e){var t=i.querySelector("."+ClassName.ITEM_ACTIVE),s=r(t),n=v.length-1,a=0===s?n:s-1;"next"===e&&(a=s==n?0:s+1),l(e,s,a)},C=function(){f.isCycling&&(u=window.setInterval(function(){a(f.direction)},f.interval))},t=function(e){var t=i.querySelector("."+ClassName.ITEM_ACTIVE),s=r(t),n=e.target.getAttribute("data-slide-to");if(e.target.hasAttribute("data-slide-to")||e.target.classList.contains("slider_control"))if(e.target.hasAttribute("data-slide-to")){if(s===n)return;l(s<n?"next":"prev",s,n)}else e.preventDefault(),a(e.target.classList.contains("slider_control_next")?"next":"prev")};for(var s in e)s in f&&(f[s]=e[s]);return i="string"==typeof f.selector?document.querySelector(f.selector):f.selector,v=i.querySelectorAll("."+ClassName.ITEM),I=i.querySelectorAll("[data-slide-to]"),C(),i.addEventListener("click",t),f.pause&&f.isCycling&&(i.addEventListener("mouseenter",function(e){clearInterval(u)}),i.addEventListener("mouseleave",function(e){clearInterval(u),C()})),{next:function(){a("next")},prev:function(){a("prev")},stop:function(){clearInterval(u)},cycle:function(){clearInterval(u),C()}}}({
selector:".slider",
isCycling:true,
direction:"next",
interval:2000,
pause:false
});
});
</script>
Так же меняйте адреса картинок на свои. Пишите нужный текст в заголовках и описании.
Для добавления, опять же прописываем дополнительные участки в коде HTML.
<div class="slider_item slider_item_5">
<div class="slider_text">
<h1>Заголовок слайда №5</h1>
<h2>Подзаголовок h2</h2>
<p>Здесь будет анонс или краткое описание изображения</p>
</div>
<img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="slide5" /></div>
</div>
<div class="slider_text">
<h1>Заголовок слайда №5</h1>
<h2>Подзаголовок h2</h2>
<p>Здесь будет анонс или краткое описание изображения</p>
</div>
<img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="slide5" /></div>
</div>
И в списке ol так же добавим
<li class="slider_indicator" data-slide-to="4"></li>
Тут нужно понять, что первый индикатор имеет дополнительный класс slider_indicator_active и порядковый номер начинается с - 0, не с единицы.
pause:false остановка слайдера, если навести на него курсор. В данном случаи - отключено. Чтобы включить нужно написать true.
interval:2000, время смены слайда
Каждый из кодов устанавливайте в гаджет HTML/Java script и перемещайте в нужное место макета блога.
Посмотрите, умудрилась установить оба слайдера на тестовом блоге
Всем терпения, здоровья. Если возникнут вопросы, пишите в комментариях.
здесь можно оформить подписку на новые шпаргалки
Привет, Вика. Очень интересно! Спасибо. В самом сообщении ведь тоже можно использовать?
ОтветитьУдалитьЛюба, привет. Да, я пробовала и в сообщении. Работает. Ой, мне уже интересно, как ты сделаешь.
УдалитьЧёрт побери! Совершенно неисчерпаемый ящик.
ОтветитьУдалитьСемён, ага, сундук шпаргалок.
ОтветитьУдалитькрасота какая! У меня над шапкой он не становится,но как вариант попробовала в слайдбаре.
ОтветитьУдалитьInfodar, интересное название, слайдбар.Но я поняла.
Удалитья знада,что ты поймёшь,не знаю почему,но я его всегда про себя величаю
УдалитьИнтересно, Виктория! Спасибо!
ОтветитьУдалитьИрина, попробуй котиков своих поставить так в блоге по первому варианту.
ОтветитьУдалитьСпасибо, Вика, мне очень понравилось! Надо как-нибудь попробовать... Только у меня в последнее время что ни попробую - не работает, я и пробовать перестала... Может в коде где ошибка, не знаю причину...
ОтветитьУдалитьЕлена, нужно на тестовом сначала играться. А там и причину понять.
ОтветитьУдалитьНа тестовом, допустим, работает, а в основном нет... причину мне не дано понять... )))) Но я на этом не зацикливаюсь - получилось, это хорошо, нет так нет... Не принципиально.
УдалитьЕлена, недавно обращалась одна подписчица. Она убрала кнопки плюсо. Проблемы вызывает скрипт «лайков» Pluso.. Погуглите про них. Вот хотя бы инфа http://webmasters.ru/forum/f31/informaciya-dlya-teh-kto-pol%60zuetsya-pluso-59452/Может в этом дело. А так у Вас фото много, нагрузка и без того большая.
ОтветитьУдалитьСпасибо, Вика! Кнопочки убрала, (вряд ли ими кто-нибудь пользуется) на досуге буду пробовать что-нибудь...
Удалитьвместо картинок возможно вставить коды от баннеров?
ОтветитьУдалитьInfodar, давно обратила внимание, что ты вообще не внимательно всё читаешь. В статье написано, чёрным по белому
ОтветитьУдалитьЕсли необходимо сделать изображение кликабельным пишем так
Infodar
<a href="здесь адрес страницы, на которую будет осуществлён переход.">Горы<img src="https://photocentra.ru/images/main74/744857_main.jpg" alt="природа южного урала"/></a>
О каких кодах баннеров ты говоришь.
Удалитькак сделать кликабельным я видела и знаю,когда картинки,я про баннеры,вместо картинок чтобы баннеры вставлять,я вставляю картинки,всё норм,вставляю баннеры-не двигаются
ОтветитьУдалитьпример не могу показать,в комментарии коды не вставляются
ОтветитьУдалить<div id="linkslot_287790"><script src="https://linkslot.ru/bancode.php?id=287790" async></script></div>
ОтветитьУдалитьОй....Давай уже на почту пиши. Какие скрипты ты мне тут показываешь. это чё такое
ОтветитьУдалить<div id="linkslot_287790"><script src="https://linkslot.ru/bancode.php?id=287790" async></script></div>