[Resolved] Smart Slider 3 and GP Section

[Mike]

Hello,

I am trying to add a smart slider 3 slider to a section I have setup in GP.

Worth noting I am only using smart slider 3 as I saw it recommended here in the forums for GP, so I am not married too it if you think there is something better!

The CSS for my section is,

	.home #Hero {
		position: relative;
		height: 52.5vh;
		overflow : hidden;
	}

I am trying to get the smart slider 3 slider to become the full width of the section and set its height dynamically to 100 percent of the #Hero section, which as you can see is set based off the page size.

At the moment I can either make the slider what they call in the settings “fullwidth” and then cut the bottom of it off using the overflow: hidden; code seen above.

OR

I can get it to fit into the section nicely height wise and center align it, but it has massive gaps either side!

Any help much appreciated as always!

Its been a while since I last wrote CSS with GP!

Mike

GeneratePress 2.2.2

GP Premium 1.7.8

[Mike]

Well, seems like after a considerable bit of messing about I got it working!

However im pretty sure the following code is very crude,

	.home #Hero .generate-sections-inside-container {
		position: relative !important;
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
		height: 100%;
	}
	
	.n2-code{
		
		width: 100%;
		height: 100%;
		
	}
	
	.n2-section-smartslider {
		
		width: 100%;
		height: 100%;
		
	}
	
	#n2-ss-2-align{
		
		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		
	}
	
	.home #Hero .n2-padding{
		
		width: 100% !important;
		height: 100% !important;
		
	}
	
	.home #Hero #n2-ss-2{
		
		width: 100% !important;
		height: 100% !important;
		
	}
	
	.home #Hero .n2-ss-slider-1{
		
		width: 100% !important;
		height: 100% !important;
		
	}
	
	.home #Hero #n2-ss-2-align{
		
			margin: 0px !important;
		
	}
	
	.home #Hero .n2-ss-slide, .home #Hero .n2-ss-layers-container{
		
		width: 100% !important;
		height: 100% !important;
		position: relative;
		
	}

Any ideas on how I can tidy that up? Or any better ways of doing what I am trying to achieve?

Mike

[Leo]

Hi there,

Hmm I’m not sure why you would need all of that CSS to make a full-width slider in Smart Slider 3.

I’ve used it a couple of times and am pretty sure the plugin lets you specify the width and height for the slider itself so just use a large width like 2000px should work.

This is something you will need to check their documentation or support though.

As far as inserting them with GP, you can remove the section padding and make the container full width in the Sections setting:
https://docs.generatepress.com/article/sections-overview/#opening-the-section-settings

Or also consider using the header element to add the slider:
https://docs.generatepress.com/article/header-element-overview/

GP itself doesn’t control the size of the slider.

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mike]

Hello,

So I tried to make the slider full width but I just could not get it working at all!

So far the CSS seems to be working OK.

Thanks for your help, will update here if anything breaks!

Mike

[Leo]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Lorinc]

Hi there!
I’m Lorinc from hungary, sorry for my english. I am using GP premium with smart slider 3. I have one slider, and this silder used in a hook type element, it has appeared above the navigation. Until now it works, but now not at all. With wp_head hook nothing appears, with before_headerhook its location appears, but the content/slider not. The site is here: link

Can everybody help me?

Thank you very much!

edit: I try it, doesnt work with any template, that i installed. I try jQuery updater plugin, did not help, and neither to try change in the smart slider settings, async, and load jquery on front-end.

[Tom]

Hi there,

Any chance you can open a new topic?

Thanks! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts