@media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
@media (min-width: 992px) {
.navbar-toggle {
display: none;
}
}
img{width:100%; max-width: реальный размер этого изображения; height: auto;}
, ну и при адаптивности на определенном размере экрана меняйте эти значения, при совсем мелком расширении перестраивайте блоки. Короче ничего сложного тут нет. var a = 1;
function hideImages1() {
$('div.first-product-cart > div.img > img').not('.slider-active').css('display', 'none');
$('div.first-product-cart div.box-item div.spinner-wrap').not('.spinner-active').css('display', 'none');
}
hideImages1();
$("div.first-product-cart .next-button").click(function() {
a++;
if (a < 7) {
$('div.first-product-cart > div.img > img.slider-active').fadeOut(function() {
$(this).next().fadeIn().addClass('slider-active');
$(this).removeClass('slider-active');
});
$('div.first-product-cart div.box-item div.spinner-active').fadeOut(function() {
$(this).next().fadeIn().addClass('spinner-active');
$(this).removeClass('spinner-active');
});
} else {
a--;
}
console.log(a);
});
$("div.first-product-cart .prev-button").click(function() {
a--;
if (a > 0) {
$('div.first-product-cart > div.img > img.slider-active').fadeOut(function() {
$(this).prev().fadeIn().addClass('slider-active');
$(this).removeClass('slider-active');
});
$('div.first-product-cart div.box-item div.spinner-active').fadeOut(function() {
$(this).prev().fadeIn().addClass('spinner-active');
$(this).removeClass('spinner-active');
});
} else {
a++;
}
console.log(a);
});
$('.responsive').slick({
dots: false,
arrows: true,
nextArrow: '<i class="fa fa-angle-right" aria-hidden="true"></i>',
prevArrow: '<i class="fa fa-angle-left" aria-hidden="true"></i>',
infinite: false,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: false,
arrows: true,
dots: false
}
},
{
breakpoint: 700,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
<body>
//= template/header.html
//= template/content.html
//= template/footer.html
</body>
Желательно без использования облегчающих инструментов типа пре- и постпроцессоров, бутсрапа, сторонних библиотек
$('.nav-tabs > li').removeClass('active');
$(".tab-content > .tab-pane").removeClass('active');
$('.nav-tabs > li').hover(
function() {
$(this).find("a").tab('show');
},
function() {
if (!$($(this).find("a").attr("href")).is(":hover")) {
$(this).removeClass('active');
$(".tab-content").find($(this).find("a").attr("href")).removeClass('active');
}
});
$('.tab-content').mouseout(function() {
$('.tab-content > .tab-pane > div').removeClass("active");
$('.nav-tabs > li').removeClass("active");
});
"Мои знания HTML\CSS3(с фреймворками и препроцессорами), ванильный JS и jQuery, Основы PHP."- так вот после всего этого вам просто необходимо изучить и использовать Bower (хотя без него можно обойтись), тот же Gulp или Webpack (как-то с трудом себе представляю жизнь без них - это сборщики проэктов), ну и Node.js для js на сервере.