Easy Slider – Webers Testseite

ABC-DEF
Slide Number 2
Slide Number 3

this button is to style the button which should be inside the slider – place it directly under that easy-slider and give the custom class to it: button-for-slider
here it is only set to a less opacity – but on default it should be set to display: none

the easy-slider gets its custom class: with-button

function button_for_easy_slider(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
	(function($) { 
		var buttonCode = $('#top .button-for-slider').get(0).outerHTML;
		$('#top .avia-slideshow.with-button .av-slideshow-caption').each(function() {
			$(this).append(buttonCode);
		});
	})(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'button_for_easy_slider');

/****** to have both - image-slide links and button links *******/

#top.page-id-42427 a .image-overlay {
  /**** display: none !important;  ****/
  z-index: 5;
}

#top .avia-slideshow.with-button .avia-button-wrap {
  position: relative;
  margin: 5px 0 0 !important;
  border: 1px solid #FFF;
  z-index: 10;
}

.avia-slideshow ~ .avia-button-wrap.button-for-slider {
  opacity: 0.2;
  /** display: none !important ***/
}

this is a full-width slider

but set via css to be not full-width – as an alternative to get the same look-a-like – but using the option of fullwidth slider to generate buttons on the slide. Advantage is that the buttons can have different stylings and text and link targets.

A Caption

Make an appointment
A Caption

Goto News Page
A Caption

Make an appointment

Zurück Weiter

1 2 3

/**** fullwidth slider got the custum class: not-so-fullwidth-slider   ********/

#top .avia-fullwidth-slider.not-so-fullwidth-slider{
  max-width: 1510px;  /** this is my standard content width here on that installation **/
  margin: 0 auto;
  box-shadow: none;
  padding: 0 50px;
}

/*** if you like ***/
#top .avia-fullwidth-slider.not-so-fullwidth-slider .avia-slideshow {
  box-shadow:  2px 2px 3px rgba(0,0,0,0.5);
}

#top .avia-fullwidth-slider.not-so-fullwidth-slider .avia-slideshow-button {
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  line-height: 1;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 3px;
  text-align: center;
  transition: all .3s;
}

Webers Webdesign