posouvání skrolu tlačítky

by Petr Haluza

HTML

<link rel="stylesheet" href="https://www.digitor.cz/digitor/stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="https://www.digitor.cz/digitor/stylesheets/style_custom.css?v=1561119223">
<link rel="stylesheet" href="https://www.digitor.cz/digitor/stylesheets/owl.carousel.css">
<link rel="stylesheet" href="https://www.digitor.cz/digitor/stylesheets/style.css">
   
    <div id="proDetail-gallery"> <!--class="col-md-4"-->
			<div class="product-icons">
			</div><!-- /product icons -->


			<div class="slide-cont">
				<div class="owl-carousel owl-proDetail-carousel owl-theme owl-loaded">
					

						
						
				<div class="owl-stage-outer">
        
        <div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 1200px;">
        
        <div class="owl-item active slidenumber1" style="width: 400px; margin-right: 0px;"><div class="imgBox" style="position: relative;">
						<a href="https://www.img4.cz/www/img/imgsticode?code=REPNG1250" data-lightbox="productImages" data-title="NGS ROLLER NITRO 3 modrý">
							<img src="https://www.img4.cz/www/img/imgthumb?code=REPNG1250" alt="">
						</a>
					</div></div>
          
          <div class="owl-item slidenumber2" style="width: 400px; margin-right: 0px;"><a href="https://www.img4.cz/www/img/imggallery?code=REPNG1250&amp;sort=1&amp;tag=enl" data-lightbox="productImages" data-title="NGS ROLLER NITRO 3 modrý-1">
							<img src="https://www.img4.cz/www/img/imggallery?code=REPNG1250&amp;sort=1" alt="">
						</a></div>
            
            <div class="owl-item slidenumber3" style="width: 400px; margin-right: 0px;"><a href="https://www.img4.cz/www/img/imggallery?code=REPNG1250&amp;sort=2&amp;tag=enl" data-lightbox="productImages" data-title="NGS ROLLER NITRO 3 modrý-2">
							<img src="https://www.img4.cz/www/img/imggallery?code=REPNG1250&amp;sort=2" alt="">
						</a></div>
            
            </div></div>
            
            <div...

CSS

/**/
#proDetail-gallery .owl-dots {
    display:flex;  
}
#proDetail-gallery .owl-dot {
    flex: 0 0 auto;   
}
#proDetail-gallery .owl-dot:first-child {margin-left:2em}
#proDetail-gallery .owl-dot:last-child {margin-right:2em}
.owl-controls { position: relative;}

.slideMeControl {position:absolute; bottom: 2.5em; background:#ffffffaa; height:auto; padding:.5em; color:#456; border-radius:5px}
.slideMeControl:hover {background:#aabbcc55}
#slideL {left:0}
#slideR {right:0}

/*jen demo*/
#proDetail-gallery {margin: 0 0 0 4em}

JavaScript

$('#proDetail-gallery .owl-dots').attr('id','slideMe') // musím takto, páč prvedk owl-dots vytváří plugin a na class skript níže nechytnu.. ais.

var button = document.getElementById('slideR');
button.onclick = function () {
    var container = document.getElementById('slideMe');
    sideScroll(container,'right',25,100,10);
};

var back = document.getElementById('slideL');
back.onclick = function () {
    var container = document.getElementById('slideMe');
    sideScroll(container,'left',25,100,10);
};

function sideScroll(element,direction,speed,distance,step){
    scrollAmount = 0;
    var slideTimer = setInterval(function(){
        if(direction == 'left'){
            element.scrollLeft -= step;
        } else {
            element.scrollLeft += step;
        }
        scrollAmount += step;
        if(scrollAmount >= distance){
            window.clearInterval(slideTimer);
        }
    }, speed);
}


if ( $("#slideMe").prop('scrollWidth') > $("#slideMe").width() ) { // skryju tlačítka když nejsou potřeba
  $(".slideMeControl").show()
} else {
	$(".slideMeControl").hide()
}