How to transform a slider full screen in full width?

This topic has 12 replies, 3 voices, and was last updated 7 years, 2 months ago ago by Jack Richardson

  • Avatar: Unionfor Web
    Rodrigo
    Participant
    November 28, 2016 at 15:47

    Hello good day,

    I bought this theme, but I would like a little help to turn the Full Screen slider to Full Width where I can adjust the height of it.

    Is there a way to make this easy? The page I’m trying to change is: home-services.html or index-classic.html

    Best regards
    Rodrigo Macedo

    11 Answers
    Avatar: Unionfor Web
    Rodrigo
    Participant
    November 30, 2016 at 20:08

    Hello good afternoon,

    Can anyone help me with this please?

    Best regards,
    Rodrigo Macedo

    Avatar: Eva
    Eva Kemp
    Support staff
    December 1, 2016 at 20:31

    Hello,

    Sorry for a delay.
    You need add this code in style.css file:

    .block-type-4{
    	height: 300px!important; 
    }

    Regards,
    Eva Kemp.

    Avatar: Unionfor Web
    Rodrigo
    Participant
    December 2, 2016 at 17:38

    Hello good afternoon,
    It was great, I had done it differently but I had to make other changes, that way it was much more practical.
    Now with another question, how do I leave this automatic slide? Well, it stands still, and I would also like to know if there is a “random” effect on changing the slide images.

    Best regards
    Rodrigo Macedo

    Avatar: Eva
    Eva Kemp
    Support staff
    December 6, 2016 at 10:02

    Hello,

    Sorry for a delay.
    You can make slider autoplay this way:
    For example for home classic you need edit the file index-classic.html and set data-autoplay value http://prnt.sc/dfx7st , like data-autoplay=”300″

    Regards,
    Eva Kemp.

    Avatar: Unionfor Web
    Rodrigo
    Participant
    December 6, 2016 at 14:13

    Hello good day,
    It worked perfectly, just to stay inside, I’m modifying the home-services.html page.
    Just the other question I left above, can you change the transitions between the slides?

    The first is, how do I display slide paging and second, how do I enable that slide loader? (Example: Type a bar that fills as the slide time passes).

    Best regards,
    Rodrigo Macedo

    Avatar: Unionfor Web
    Rodrigo
    Participant
    December 6, 2016 at 20:44

    Hello good afternoon,
    I would like to leave below the link of the page so you can see better too:

    http://brasilcar.unionforwebdesigner.com/home-services.html

    Best regards,
    Rodrigo Macedo

    Avatar: Eva
    Eva Kemp
    Support staff
    December 8, 2016 at 10:13

    Hello,

    Please read slider documentation http://idangero.us/swiper/api/#.WEkFe6KLSWY , there you’ll find
    http://prntscr.com/dgrtba
    watchSlidesProgress
    watchSlidesVisibility

    You should add it to file js/global.js http://prntscr.com/dgru1k .

    Regards,
    Eva Kemp.

    Avatar: Unionfor Web
    Rodrigo
    Participant
    December 8, 2016 at 14:11

    Hello good day,
    Please help me, I’m lost with this slide, I managed to sort out the navigation part, the slide was with the class="no-pagination" I removed and the slide navigation appeared, so I made some CSS changes to agree.

    Now I’m missing the part of displaying the slide count bar, and in the transitions I added the codes in the file “global.js” as you said however nothing has changed on the slide. And in the transitions part, I added as follows:

    swipers['swiper-'+index] = new Swiper('.swiper-'+index,{
    	effect: 'fade',
    	speed: speedVar,
    	pagination: '.pagination-'+index,
    	loop: loopVar,
    	paginationClickable: ($t.closest('.scrolling-popup').length)?false:true,
    	autoplay: autoPlayVar,
    	slidesPerView: slidesPerViewVar,
    	keyboardControl: true,
    	calculateHeight: true, 
    	simulateTouch: simVar,
    	centeredSlides: centerVar,
    	roundLengths: true,
    	watchSlidesProgress: true,
    	watchSlidesVisibility: true,
    	onSlideChangeStart: function(swiper){
    	   var activeIndex = (loopVar===true)?swiper.activeIndex:swiper.activeLoopIndex;
    	   if($('.magazine-gallery-small-thumbs').length>=1){
    	    $('.magazine-gallery-small-thumbs').removeClass('active');
    	    $('.magazine-gallery-small-thumbs').eq(activeIndex).addClass('active');  
    	   }
    },
    

    But the animation continued in the same way, what did I do wrong?
    You could give me that light because I’m in the dark. rsrs

    Best regards,
    Rodrigo M.

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    December 12, 2016 at 16:07

    Hello,

    Sorry for a delay.
    Unfortunately this can’t be achieved as slider code is rewritten by our developers and some options may not work.
    In this case feature you want, can’t be done.

    Please take our apologies.

    Best regards,
    Jack Richardson.

    Avatar: Unionfor Web
    Rodrigo
    Participant
    December 12, 2016 at 20:00

    Hello good afternoon,
    I downloaded the plugin without modifications and I tried to make the changes as I had informed them the most I found a bit complicated, so I’ll leave as is.

    Still thank you for the answers to the previous questions.
    Consider Slide problem solved.

    Best regards,
    Rodrigo Macedo

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    December 13, 2016 at 12:35

    Hello,

    You’re welcome.

    Best regards,
    Jack Richardson.

  • Viewing 12 results - 1 through 12 (of 12 total)

The issue related to '‘How to transform a slider full screen in full width?’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.