Использование owl-carousel для слайдера изображений.
В режиме рабочего стола должно отображаться изображение рабочего стола. когда ширина экрана меньше 768 пикселей, отображается мобильное представление.
Этот код ниже: -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- owl carousel-->
<link rel="stylesheet" href="OwlCarousel2-2.3.4/dist/assets/owl.carousel.css">
<link rel="stylesheet" href="OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css">
<style>
.mobileview{
display: none;
}
@media only screen and (max-width:768px){
.desktopview{
display: none;
}
.mobileview{
display: block;
}
}
</style>
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item">
<img src="img/desktopview1.png" alt="" class="desktopview">
<img src="img/mobileview1.png" alt="" class="mobileview">
</div>
<div class="item">
<img src="img/desktopview2.png" alt="" class="desktopview">
<img src="img/mobileview2.png" alt="" class="mobileview">
</div>
</div>
<!-- Owl Carousel-->
<script src="OwlCarousel2-2.3.4/docs/assets/vendors/jquery.min.js"></script>
<script src="OwlCarousel2-2.3.4/dist/owl.carousel.min.js"></script>
<script>
$('.owl-carousel').owlCarousel({
loop: true,
nav: true,
margin: 1,
autoplay: 5000,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
})
</script>
</body>
</html>
Ниже приведен скриншот, как он выглядит одинаково на обоих больших устройствах ( экран рабочего стола) и мобильные устройства (маленький экран).
снимок экрана 1: изображение с рабочего стола - изображение с красным фоном
изображение с мобильного устройства: изображение с синим фоном
Снимок экрана 2. Изображение рабочего стола - изображение с оранжевым фоном
Мобильное изображение: изображение с фиолетовым фоном (Mobileview2)
Итак, мой вопрос заключается в том, как отображать изображения с красным фоном и оранжевым фоном только на большом экране
изображений с темно-синим фоном и фиолетовым фоном только на экране мобильного телефона?