Change the effect of showing slide in Home Slider

Home Forums WordPress Theme Monolit – Responsive Architecture WordPress Theme Change the effect of showing slide in Home Slider

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by  CTHthemes 2 weeks, 4 days ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #25593

    Mstii_2017
    Participant

    Supported

    Hi team,

    I would like to change how the slide appears in the Home Slider section.
    Currently, it shows slide-by-slide and the slide goes from the right to the left: https://zenzi.vn/
    But I want to change the effect into: one slide fade-out and another slide fade-in like this http://le-house.vn/

    Can this theme be able to do that? Please guide me

    #25597

    CTHthemes
    Keymaster

    Yes, but you have to add this custom code to theme’s scripts.js file:
    http://prntscr.com/krmh2m

    
    animateOut: 'fadeOut',
    animateIn: 'fadeIn'
    
    #26200

    Mstii_2017
    Participant

    Supported

    Currently, the featured portfolios are showned like this: https://prnt.sc/kysgjd
    I want the text showed in the white space next to the image like this: https://prnt.sc/kysg2n
    Can you guide me how to?
    I also wanna change the effect: when I hover to the image, it will be blurred (covered by a transparent white layout) and when I click the image, it will link to the detail page of the portfolio. Currently, I can only click to the “View Project” button to see the detail page of the portfolio. Also, the same thing I would like to apply for this page https://zenzi.vn/vertical-fullscreen/
    Hope to get reply soon! Thank you.

    #26216

    CTHthemes
    Keymaster

    Here is the solution:

    
    .left-direction .parallax-deck {
        right: -60%;
    }
    .right-direction .parallax-deck {
        left: -60%;
    }
    
    

    Edit scripts.js file to add new code bellow ( as in this screenshot: http://prntscr.com/gsbnaj )

    
    jQuery(".gallery-item:not(.has-popup) .port-desc-holder").on("click", function() {
        var a = jQuery(this).find('h3 a').attr("href");
        window.location.href = a;
        return false;
    });
    
    jQuery(".portfolio_item:not(.has-popup) .port-desc-holder").on("click", function() {
        var a = jQuery(this).find('h3 a').attr("href");
        window.location.href = a;
        return false;
    });
    
    #26253

    Mstii_2017
    Participant

    Supported

    Hi team,
    I have added

    .left-direction .parallax-deck {
        right: -60%;
    }
    .right-direction .parallax-deck {
        left: -60%;
    }

    into the additional CSS, the laptop version looks good. However, I check when accessing via mobile, the text appear like in the attached image. How to fix this?

    For the jquery part, it works for the page Portfolio. I want to apply the same effect for the featured projects shown on the homepage as well: https://zenzi.vn, please guide me further!
    Thanks.

    Attachments:
    You must be logged in to view attached files.
    #26264

    CTHthemes
    Keymaster

    1 – USe this too

    
    @media (max-width: 1024px){
       .left-direction .parallax-deck {
           right: 0 !important;
       }
       .right-direction .parallax-deck {
           left: 0 !important;
       }
    }
    

    2 – It’s not possible.

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

You must be logged in to reply to this topic.

Hello! CityBook version 1.2.7 was released. Bulk Import Add-On, OpenStreetMapView Details
+