Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Using extraslider.js in SugarCube

edited September 2016 in Help! with 1.x
Hi,

I'm trying to use extraslider.js in SugarCube: http://slider.extralagence.com/ http://slider.extralagence.com/demos/simple

I put this in a custom div that occupies the whole screen, so not trying to force it into the passage area or anything. However, it only seems to half work. Every second image is a blank. Even going to their codepen which works on codepen, copypasting all the required code, and making sure the javascript is in userlib.js, is not fixing it.

Can anyone see why it wouldn't work?

Comments

  • edited September 2016
    Versions (of everything)?

    For the codepen example, are you including both the base Extraslider CSS and then the CSS specific to the example—you do need both.

    PS: This thing seems rather finicky.
  • In that case I probably won't use it and will just make my own using GSAP.
  • Eh. It seems to work well enough once you divine the correct version of the JS and CSS to use. You need v1.5, off of its GitHub—the link on the site yields v1.4, which seems buggy.

    And here is all the CSS you need for v1.5 (based on the codepen example):
    /*********************
     *
     * DEFAULT STYLES
     *
     ********************/
    .extra-slider,
    .extra-slider .wrapper {
    	position: relative;
    }
    .extra-slider .wrapper {
    	overflow: hidden;
    }
    .extra-slider ul {
    	display: block;
    	list-style: none;
    	position: relative;
    }
    .extra-slider-slide ul {
    	align-content: stretch;
    	display: flex;
    	flex-wrap: nowrap;
    }
    .extra-slider-direction-y ul {
    	flex-direction: column;
    }
    .extra-slider-processed li {
    	display: block;
    	flex: 0 0 auto;
    	list-style: none;
    	position: relative;
    }
    .extra-slider-fade li,
    .extra-slider-custom li,
    .extra-slider-curtain li {
    	position: absolute;
    	top: 0;
    	left: 0;
    }
    .extra-slider:not(.extra-slider-processed) li:first-child,
    .extra-slider li.extra-slider-first {
        position: relative;
    }
    .extra-slider.extra-slider-curtain li {
    	margin: 0;
    	overflow: hidden;
    	width: 100%;
    }
    
    
    /*******************************************************************/
    
    
    /*********************
     *
     * DEFAULT STYLES
     *
     ********************/
    .extra-slider { line-height: 1; }
    .extra-slider ul { margin: 0; padding: 0; border: none; }
    
    
    /*******************************************************************/
    
    
    /*********************
     *
     * DEFAULT STYLES
     *
     ********************/
    .extra-slider {
    	margin: auto;
    	width: 900px;
    	max-width: 100%;
    }
    .extra-slider img {
    	display: block;
    }
    
    /*********************
     *
     * NAVIGATION
     *
     ********************/
    .extra-slider .navigation {
    	position: static;
    }
    .extra-slider .navigation a {
    	background: #FFF none center center no-repeat;
    	background-size: 15px 20px;
    	border: 1px solid #ddd;
    	display: block;
    	-webkit-border-radius: 35px;
    	border-radius: 35px;
    	overflow: hidden;
    	margin-top: -35px;
    	position: absolute;
    	top: 50%;
    	z-index: 50;
    	text-indent: 100%;
    	white-space: nowrap;
    	width: 70px;
    	height: 70px;
    }
    .extra-slider .navigation a:hover {
    	background-color: #fff799;
    }
    .extra-slider .navigation .prev {
    	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAcCAMAAABbGh8VAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAvVBMVEUAAAAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAAAADXuIvaAAAAPXRSTlMALrsWMuzWGTfv2R088b9B9N0fR/XYG0z41RhS+c8VWPvMEl78xg9jwg1p/r0KcLh3swd5sQZztwlrvGX9RwaDgwAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAACdSURBVCjPbdJXDsJADATQpdfQews9oYTeg+9/LYSNvA7yfD5pJXu8xsjE4gkTTTIF6UxEsjkAyBeEFB34pmSlXEGp1ljqDZRmi6XdQen2WPoDlOGIxR2jTKYssznKYsnikfgrlvUGZRuw7Ej2Vg4IcDzZoc9El6tY7UYP7w9hT7JXICx8/w+hjaotpK2tlaNVqBWtnUM7mnba3wf4AGFkJ/RhcoelAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTAzLTE0VDE3OjUzOjQzKzAxOjAwoRtOzwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0wMy0xNFQxNzo1Mzo0MyswMTowMNBG9nMAAAAASUVORK5CYII=');
    	left: -35px;
    }
    .extra-slider .navigation .next {
    	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAeBAMAAAA84DghAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAHlBMVEUAAAAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAAAADxwc6qAAAACHRSTlMAA6ChR/5vbiOi6p0AAAABYktHRACIBR1IAAAACXBIWXMAAAsSAAALEgHS3X78AAAATElEQVQY02NgYBRggAEhRRiLUaMJJizc0QETdu3ogAmzRSCEU+kjXNrR0QxhsgMVGFJFMBUuyIYQdIULgjxvCAsSC5ggUBgmyIAIPgDftSz9jAO8HAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNC0wMy0xNFQxNzo1Mzo1MCswMTowMFxZVMwAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTQtMDMtMTRUMTc6NTM6NTArMDE6MDAtBOxwAAAAAElFTkSuQmCC');
    	right: -35px;
    }
    
    /*********************
     *
     * PAGINATION
     *
     ********************/
    .extra-slider .pagination {
    	margin: 0 0 0 0;
    	position: absolute;
    	left: 50%;
    	bottom: 6px;
    	text-align: center;
    	z-index: 50;
    	width: auto;
    }
    .extra-slider .pagination a {
    	background: #FFF;
    	border: 2px solid transparent;
    	color: transparent;
    	display: inline-block;
    	margin: 0 4px;
    	text-indent: 100%;
    	white-space: nowrap;
    	position: relative;
    	left: -50%;
    	width: 12px;
    	height: 12px;
    	-webkit-border-radius: 20px;
    	border-radius: 20px;
    }
    .extra-slider .pagination a.extra-slider-link-active {
    	background-color: #fff799;
    }
    .extra-slider .pagination a:hover {
    	border-color: #303030;
    }
    
    /*********************
     *
     * CONTENT
     *
     ********************/
    .extra-slider ul {
    	margin: auto;
    	max-width: 900px;
    }
    .extra-slider li {
    	margin: 0;
    	width: 100%;
    }
    .extra-slider li img {
    	max-width: 100%;
    	height: auto;
    }
    .extra-slider li p {
    	color: #FFF;
    	font-size: 12px;
    	font-family: Georgia, serif;
    	font-style: italic;
    	margin: 0;
    	position: absolute;
    	right: 10px;
    	bottom: 5px;
    	text-align: right;
    }
    .extra-slider li p a {
    	color: #fff799;
    	background: transparent;
    	text-decoration: none;
    }
    .extra-slider li p a:hover {
    	color: #fff799;
    	background: transparent;
    	text-decoration: underline;
    }
    
    /*********************
     *
     * RESPONSIVE
     *
     ********************/
    @media only screen and (max-width: 960px) {
    	.extra-slider .navigation a {
    		background-size: 20%;
    		margin-top: -20px;
    		width: 40px;
    		height: 40px;
    	}
    	.extra-slider .navigation a.next {
    		right: 20px;
    		margin-left: auto;
    	}
    	.extra-slider .navigation a.prev {
    		left: 20px;
    		margin-left: auto;
    	}
    }
    @media only screen and (max-width: 650px){
    	.extra-slider .pagination {
    		display: none;
    	}
    }
    
  • Thanks for the detective work. I didn't think to check GitHub. :)
Sign In or Register to comment.