OK, I got it working!!!
I created a scroll left/right code with javascript and its working great.
This is the code:
$(document).ready(function () {
$("#next").click(function () {
$(".slide").animate({
left: '-=500'
}, 'slow');
});
$("#prev").click(function () {
$('.slide').animate({
left: '+=500'
}, 'slow');
});
});
Its animating to right and to left on what button I click, but there is a problem, no matter how much I click, the animation will still keep going right or left infinitely after every click.
So how to set the code to make the click not work after it reaches the end of the div??
HTML:
<div class="row">
<!-------- SlideShow -------->
<div class="col-lg-11
col-md-11
col-sm-11
col-xs-11">
<table class="img-slide">
<!-------- Interior -------->
<div class="slide col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h2 class="architecture"><b>Architecture</b></h2>
<img height="520" src="imgs/cover/wakame.png"/>
<img height="520" src="imgs/cover/tarhati.png"/>
<img height="520" src="imgs/cover/baytoti.png"/>
<img height="520" src="imgs/cover/lomar.png"/>
<img height="520" src="imgs/cover/meraki.png"/>
<!-------- Architecture -------->
<h2 class="interior"><b>Interior</b></h2>
<img height="520" src="imgs/cover/inameiya.png"/>
</div>
</table>
<button id="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
<button id="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div>
CSS:
.img-slide, .slide {
display:inline-flex !important;
}
.architecture {
transform: rotate(-90deg);
transform-origin: 45% 17%;
margin-right: -150px;
}
.interior {
transform: rotate(-90deg);
transform-origin: 46% 8%;
margin-right: -65px;
}
img {
position: relative;
}