javascript - Adjust height of owl-carousel -
currently owl-carousel have employed in website far tall, takes more full screen. demo on owl-carousel 1 image per slide appears possible adjust height. using latest version of owl carousel 2. tried wrapping carousel in div , adjusting height of outer div. have noticed can adjust width, has effect of adjusting height. however, adjust height without adjusting width. have attached javascript , html. thanks.
<body> <div id="navigation"> <ul> <li> <%= link_to "about", pages_about_path, id: "about-link"; %> </li> <li> <%= link_to "contact us", pages_contact_us_path; %> </li> </ul> </div> <div class="wrapper"> <h1><img src="http://cdn-0.famouslogos.us/images/computer-logos/ab-computer-repair-logo.jpg"> </h1> <div id="carousel" class="owl-carousel owl-theme"> <div class="item"><img src="https://responsivedesign.is/__data/assets/image/0013/5017/owl-carousel-2.jpg"></div> <div class="item"><img style="width:100%; height:auto;" src="http://www.pcgeeksusa.com/wp-content/uploads/2015/01/computer-repair.jpg"></div> </div> <div class="contact"> <aside> <h2>contact info</h2> <p> nomadic inc. <br> tuscaloosa, al 35404 <br> <b> e-mail: </b> nesella@comcast.net <br> <b> phone: </b> 205-799-1668 </p> </aside> </div> </div> </body>
and javascript:
$ -> $("#carousel").owlcarousel({ autoplay: true, items: 1, loop: true, navigation : true, slidespeed : 300, paginationspeed : 400, singleitem:true })
add autoheight:true set height of carousel auto.
see below correct code
$("#carousel").owlcarousel({ autoplay: true, items: 1, loop: true, navigation : true, slidespeed : 300, paginationspeed : 400, singleitem:true, autoheight:true })
Comments
Post a Comment