I have created the owl.carousel slider in Magento 2 and created it in phtml file using the following code.
<div class="carousel-wrap">
<div class="owl-carousel">
<div class="item"><img src="<?php echo $block->getViewFileUrl("Test_Slider::images/testpage/slider1.JPG")?>"></div>
<div class="item"><img src="<?php echo $block->getViewFileUrl("Test_Slider::images/testpage/slider2.jpg")?>"></div>
<div class="item"><img src="<?php echo $block->getViewFileUrl("Test_Slider::images/testpage/slider3.jpg")?>"></div>
<div class="item"><img src="<?php echo $block->getViewFileUrl("Test_Slider::images/testpage/slider4.jpg")?>"></div>
<div class="item"><img src="<?php echo $block->getViewFileUrl("Test_Slider::images/testpage/slider5.jpg")?>"></div>
<div class="item"><img src="<?php echo $block->getViewFileUrl("Test_Slider::images/testpage/slider6.jpg")?>"></div>
</div>
</div>
Also, create a js file using the following code.
require(['jquery', 'owlcarousel'], function($) {
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
items:3,
margin: 10,
autoplay: true,
autoplayHoverPause: true,
autoplayTimeout:1000,
responsive: {
0: {
items: 2.5
},
600: {
items: 2.5
},
1000: {
items: 2.5
}
}
});
});
});
But this sometimes image is not displayed and its refresh when I scroll the page.
https://i.sstatic.net/62SOZ.png
So any solution how can I refresh the owl.carousel slider without scrolling the page when it displays a blank image.