Я использую карусель совы для перемещения контейнера на моем веб-сайте. Ползунок работает правильно, проблема возникает только после сворачивания экрана или если я проверю это на другом мониторе или в другом браузере.
По сути, приведенный ниже код не одинаков для всех веб-приложений и размеров экрана.
Размер контейнера зависит от всех браузеров и разных размеров монитора. Может ли кто-нибудь направить меня сюда?
<div class="container" style= "background-color: #DCDCDC;">
<div class="country-name">Countries</div>
<div class= "owl-carousel own-theme" style="padding-bottom: 15px;">
<div class="column-about">
<div class="country-list">Opportunities?</div>
<div id="MyDIV">
The range of courses offered at the universities is vast and gives you the opportunity to choose the area<a href="listofcountries.html#anchor-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="column-about">
<div class="country-list">Opportunities?</div>
<div id="MyDIV">
rsities in the world with a modern approach to education and a welcoming<a href="listofcountries.html#netherland-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="column-about">
<div class="country-list">Opportunities ?</div>
<div id="MyDIV">
Theopular destinations to study higher education, with more than 500,000 students e education degrees and the qualifications are recognised by employers<a href="listofcountries.html#uk-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="column-about">
<div class="country-list">Opportunitie?</div>
<div id="MyDIV">
higher education system is one of the best in Europe with a good career opportunities. Students attending a<a href="listofcountries.html#france-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
</div>
</div>
<div class="column-about">
<div class="country-list">Opportunities ?</div>
<div id="MyDIV">
Universitee Programs in the world. University i<a href="listofcountries.html#sweden-name" class="more_btn__block">More<i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
dotsContainer: true,
nav: true,
autoplay: true,
autoplayTimeout: 2000,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
300: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
},
1600: {
items: 5
}
}
});
function myFunction() {
document.getElementById("myDIV").style.MozTextAlignLast = "right";
document.getElementById("myDIV").style.textAlignLast = "right";
}
</script>