Home Forums Porto Template Carousel Elements – Multiple items

This topic contains 3 replies, has 2 voices, and was last updated by  Support2 1 week, 3 days ago. This post has been viewed 105 times

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10026539

    keangwei83
    Participant

    Hi Support,

    We are looking on default carousel elements style, navigation left and right require features same as multiple items.

    http://preview.oklerthemes.com/porto/6.2.1/elements-carousels.html

    Please Advise.



    Template Version: 5.7.2
    #10026553

    Support2
    Keymaster

    Hello,

    Here is the code you need for that:

    <div class="owl-carousel owl-theme" data-plugin-options="{'items': 6, 'margin': 10}">
    	<div>
    		<img class="img-fluid" src="img/projects/project-1.jpg" alt="">
    	</div>
    	<div>
    		<img class="img-fluid" src="img/projects/project-2.jpg" alt="">
    	</div>
    	<div>
    		<img class="img-fluid" src="img/projects/project-3.jpg" alt="">
    	</div>
    	<div>
    		<img class="img-fluid" src="img/projects/project-4.jpg" alt="">
    	</div>
    	<div>
    		<img class="img-fluid" src="img/projects/project-5.jpg" alt="">
    	</div>
    	<div>
    		<img class="img-fluid" src="img/projects/project-6.jpg" alt="">
    	</div>
    	<div>
    		<img class="img-fluid" src="img/projects/project-1.jpg" alt="">
    	</div>
    	<div>
    		<img class="img-fluid" src="img/projects/project-2.jpg" alt="">
    	</div>
    	<div>
    		<img class="img-fluid" src="img/projects/project-3.jpg" alt="">
    	</div>
    	<div>
    		<img class="img-fluid" src="img/projects/project-4.jpg" alt="">
    	</div>
    	<div>
    		<img class="img-fluid" src="img/projects/project-5.jpg" alt="">
    	</div>
    	<div>
    		<img class="img-fluid" src="img/projects/project-6.jpg" alt="">
    	</div>
    </div>

    Please try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10026564

    keangwei83
    Participant

    Hi Rodrigo,

    As your given coding for different style display. We are request left and right navigation once click a row of item ll slide to left.

    below URL for print screen explanation
    https://www.dropbox.com/s/pzrefyq1ftvokfw/owl-carousel-01.jpg?dl=0

    Please advise.


    #10026566

    Support2
    Keymaster

    Hello,

    Thanks for the new explanation.

    To do that you only need put a slideBy option in data-plugin-options.
    Here’s a code that you can use for exemple:

    <div class="owl-carousel owl-theme stage-margin" data-plugin-options="{'items': 6, 'slideBy': 6, 'margin': 10, 'loop': false, 'nav': true, 'dots': false, 'stagePadding': 40}">
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-5.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-6.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-7.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-1.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-2.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-3.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-1.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-2.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-3.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-fluid rounded" src="img/projects/project-4.jpg">
    	</div>
    </div>

    Please try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


Viewing 4 posts - 1 through 4 (of 4 total)