Home Forums Porto Template A few questions about the class="owl-carousel"

This topic contains 3 replies, has 2 voices, and was last updated by  Support2 5 months ago. This post has been viewed 313 times

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

    Hello.
    1)
    How can I enable the “auto-replay” feature in the class class=”owl-carousel” from the demo-file
    “demo-real-estate-properties-detail.html”
    2)
    How in each element of the carousel determine the text that appears in the upper left corner of the picture?
    (The text is displayed once using the class <span class = “thumb-info-listing-type… in the demo file)
    3)
    How move the navigation arrows (left or right) in the region of thumbs without loss of functionality.


    <div class=”thumb-gallery”>
    <div class=”lightbox” data-plugin-options=”{‘delegate’: ‘a’, ‘type’: ‘image’, ‘gallery’: {‘enabled’: true}}”>
    <div class=”owl-carousel owl-theme manual thumb-gallery-detail show-nav-hover” id=”thumbGalleryDetail”>

    Thank you
    Konstantin



    Template Version: 5.4
    #10020546

    Support2
    Keymaster

    Hello,

    1) Sorry but on this page (demo-real-estate-properties-detail.html) don’t have a owl carousel element. Also does not exist the option “auto-replay”, instead you can use the option “autoPlay”. Like this code below:
    If you are setting the options of plugin via HTML:

    <div class="owl-carousel owl-theme" data-plugin-options="{'items': 1, 'margin': 10, 'autoplay': true, 'autoplayTimeout': 1000}">
    	<div>
    		<img alt="" class="img-responsive img-rounded" src="img/projects/project-1.jpg">
    	</div>
    	<div>
    		<img alt="" class="img-responsive img-rounded" src="img/projects/project-2.jpg">
    	</div>
    </div>

    If you are setting the options via Javascript code (when use the “manual” class on owl element):

    $('.owl-carousel').owlCarousel({
    	items: 1,
    	margin: 10,
    	autoPlay: true,
    	autoplayTimeout: 1000
    });

    2) I am supposing that you are trying to use a Demo Real Estate listing item style inside a owl carousel, right ? To get the same style of listing properties, you need to copy all HTML and CSS of the listing item. The code below is the CSS that you need for this:

    .listing-item {
    	-webkit-transition: all 0.3s ease;
    	-moz-transition: all 0.3s ease;
    	transition: all 0.3s ease;
    }
    .listing-item:hover {
    	box-shadow: 10px 8px 44px -15px rgba(0, 0, 0, 0.33);
    }
    .listing-item:hover .thumb-info .thumb-info-price i:after {
    	width: 60px;
    }
    .listing-item .thumb-info .thumb-info-listing-type {
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 2;
    }
    .listing-item .thumb-info .thumb-info-price {
    	display: block;
    	width: 100%;
    	line-height: 1;
    }
    .listing-item .thumb-info .thumb-info-price i {
    	position: relative;
    }
    .listing-item .thumb-info .thumb-info-price i:after {
    	content: '';
    	display: block;
    	position: absolute;
    	top: 50%;
    	right: 0;
    	width: 40px;
    	border-bottom: 1px solid #219cd2;
    	-webkit-transform: translateY(-50%);
    	-moz-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
    	-o-transform: translateY(-50%);
    	transform: translateY(-50%);
    	-webkit-transition: all 0.3s ease;
    	-moz-transition: all 0.3s ease;
    	transition: all 0.3s ease;
    }
    .listing-item .thumb-info .custom-thumb-info-title {
    	display: block;
    }
    .listing-item .thumb-info .custom-thumb-info-title ul li {
    	display: inline-block;
    	line-height: 1;
    	padding: 1px 5px;
    }
    .listing-item .thumb-info .custom-thumb-info-title ul li:nth-child(1) {
    	padding-left: 0;
    }
    .listing-item .thumb-info .custom-thumb-info-title ul li:nth-child(2) {
    	border-left: 1px solid #b8b8b8;
    	border-right: 1px solid #b8b8b8;
    }

    3) To change the position of arrows to thumbs, first add the class name custom-nav-style to carousel, like this code below:

    <div class="owl-carousel owl-theme manual thumb-gallery-detail show-nav-hover custom-nav-style" id="thumbGalleryDetail">

    And in css/custom.css add this code:

    .custom-nav-style .owl-nav {
        width: 120%;
        left: 50%;
        top: initial;
        bottom: -40px;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

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

    Kind Regards,

    Rodrigo.


    #10020564

    Hello.

    I think that a more correct answer to the first my question will be

    loop: true,
    autoplay:true,
    autoplayTimeout:1000,
    autoplayHoverPause:true,

    Also I want to note that your answer is a little wrong.
    Parameter with name autoPlay does not exist.


    #10020580

    Support2
    Keymaster

    Hello,

    you are right. It’s autoplay, sorry.

    Best Regards,

    Rodrigo.


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