Горизонтальный слайдер на маленьких экранах, как правильно реализовать?

Question

[Гарес Антонович]

Добрый день, есть блок в который выводиться 3 последних новости на сайте, но после того как размер экрана падает >768px хотелось бы что бы выводилась 1 новость но были стрелочки слайдера с возможностью loop.

На сайте используется owl-carousel и у него есть возможность адаптивности, но я не совсем поинмаю как сделать так что бы при >768px функции карусели вообще не работали, а только после уменьшения экрана включался слайдер.

Answer 1

[Гарес Антонович]

function postsCarousel() {
		var checkWidth = $(window).width();
		var owlPost = $(".owl-carousel-news");
		if (checkWidth > 767) {
			if(typeof owlPost.data('owl.carousel') != 'undefined'){
				owlPost.data('owl.carousel').destroy(); 
			}
			owlPost.removeClass('owl-carousel');
		} else if (checkWidth < 768) {
			owlPost.addClass('owl-carousel');
			owlPost.owlCarousel({
    		items:1,
    		dots:false,
    		loop:true,  
    		touchDrag  : false,
    		mouseDrag  : false,
    		smartSpeed: 700,
    		nav:true,
    		navText: ['<i class="flaticon-back"></i>','<i class="flaticon-next"></i>']
			});
		}
	}
  postsCarousel();
  $(window).resize(postsCarousel);

Решил с помощью такого условия для owl carousel

Answer 2

[muchdoge]

попробуйте медиа-запросы. Например, Ваш случай можно как-то так понять, думаю:

@media screen and(color) and(min-width:768px){

/* классы  карусельки и вообще все  то , что должно вести себя
   по-другому при ширине 768 пикселов  на  цветном  экране.
*/

}

/* Более ширше можно сделать так , определяя , какая  ориентация  экрана. */
/* альбомное соотношение сторон */
@media screen and(color) and(min-width:768px) and(orientation: landscape){
}
/*  портретное соотношение сторон */
@media screen and(color) and(min-width:768px) and(orientation:portrait){
}

Используя классы или айди элементов при изменении размеров элемента можно и яваскриптом что-то добавлять-убирать, JQuery хорошо об этом заботится.

Кстати да . Получилось бы неплохо. При изменении размеров элемента ( при сжатии до определенного размера ) появляется не скролл , а блок ( ) , который выполняет функции скроллинга. ( JQuery дает неограниченные возможности) . И в плане использования в мобильном приложении было бы удобнее