Return to previous page

How to transform a slider full screen in full width?

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

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

#147190 Copied

11 Answers

Rodrigo

Participant

November 30, 2016 at 20:08

Hello good afternoon,

Can anyone help me with this please?

Best regards,
Rodrigo Macedo

#147507 Copied
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.
#147644 Copied
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

#147770 Copied

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.

#148088 Copied

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

#148122 Copied

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

#148172 Copied

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.

#148340 Copied
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.
#148362 Copied
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.

#148663 Copied

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

#148696 Copied

Jack Richardson

Support staff

December 13, 2016 at 12:35

Hello,

You’re welcome.

Best regards,
Jack Richardson.

#148855 Copied
Tagged: full screen, full width, slider, themes, transform, woocommerce, wordpress
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

How to transform a slider full screen in full width?

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection