bchanx / slidr

add some slide effects.

bchanx

a place to collect my thoughts.

slidr's Issues

IE8 expected identifier error

Hi there,

IE8 seems to through the above error when trying to reference e.in in the 'after', seems it doesn't like 'in'. Any thoughts?

Start by onload

Hi,
thanks for the great script! Is it possible to use it for a automatic slide effect when the page is loaded? I'd like to let the content roll in (just one time, so no autorepeated slideshow) when someone enters the page but I'm not sure how to call the slidr function with onload()...
Would be great if you could give me a hint how to do this (if it can be done with the slidr script).
Thanks,
Peter

Setting Up

Hey there! Can you please give more detailed instructions on how to set it up? I have included the html markup, also I have called the function on document ready and added the link to the script at the end of the body. What more do next in order for it to work? Thanks!

endless loop

Hello,
is it possible to make an endless loop?
after the last picture it should start from the beginning.
i didn't find anything for this topic

THANKS for help and thank for the amazing plugin

greets steri

Error when slidr isn't around

[Slidr] Could not find element with id [slidr-xx]. xx.min_3.js:47
Uncaught TypeError: Cannot call method 'add' of undefined 

Is there a way to fix this without jQuery?

Delay

Hi there,

Is there a way to have a delay in-between the slides changing? i.e. first slide shows > user clicks breadcrumb > delay > change slide function runs.

Reason being that we have some animation that runs on individual components within each slide and we want to run some more animation on those components before we run the animation for next slide.

I have tried using timing: { 'none': '5s ease-in' } to control this, however by passing 'none' it means the 5s delay doesn't happen.

I hope that makes sense.

add dynamic slides

when adding dynamic slides, and sliding to them. slider does not slide.

see example below:
http://jsfiddle.net/C8hsP/1/

Auto Transition

I really like the slider! I'm just having trouble getting the auto slide feature to work

slidr.create('slidr-img', {
after: function(e) { console.log('in: ' + e.in.slidr); },
before: function(e) { console.log('out: ' + e.out.slidr); },
breadcrumbs: true,
controls: 'none',
direction: 'horizontal',
fade: true,
keyboard: false,
overflow: false,
theme: '#222',
timing: { 'fade': '.3s ease-in' },
touch: false,
transition: 'fade'
}).start();
});

slidr.auto(2, left, data-slidr);
slide(right);

no keyboard naviagation

Keyboard navigation - move your cursor on top of a Slidr, and hit the arrow keys!

Does not seem to work on Win7, FF24, Chrome Beta, IE10.

Other than that, seems like an awesome library!

External CSS

Hey, Brian. Great project!

I just want to ask why not use external css styles with classes? I think it could be more flexible for styling.

jquery.bxSlider - good example. I use it often in my projects and edit it css directly.

Autoplay

Is it possible to set an option to autoplay the slides?

Cannot call method of 'start' undefined.

I have this markup on the page, and both the slidr library and object call comes in just at the end of the body. The implementation works flawlessly on Chrome on OS X even though the console spits this message:

Uncaught TypeError: Cannot call method 'start' of undefined 

However, Chrome on Windows doesn't render slidr at all, instead leaving a 0 height object.

The Body

<div id="featured" class="center">
    <div data-slidr="one">
        <h2><a href="http://pearshapedexeter.com/post/77702772634/skaters-manhattan-review">Skaters - 'Manhattan' Review</a></h2>
        <img src="http://i.imgur.com/Q6ad10V.jpg" alt="Manhattan - Skaters">
        <p><b>Pip Williams</b> reviews the new release from up and coming group Skaters.</p>
    </div>
    <div data-slidr="two">
        <h2><a href="http://pearshapedexeter.com/post/77701630818/post-four-monday-24th-february-2014-hello-fond">The Listening Post - #4</a></h2>
        <img src="http://i.imgur.com/RG6yUlv.jpg" alt="The Listening Post">
        <p><b>James Hitchings-Hales</b> flags the best in new music for your perusal.</p>
    </div>
    <div data-slidr="three">
        <h2><a href="http://pearshapedexeter.com/post/77700202322/thumpers-headline-kink-nights-at-the-cavern">Thumpers Headline KINK</a></h2>
        <img src="http://i.imgur.com/gmIGaaR.jpg" alt="Thumpers at Cavern">
        <p><b>Jack Reid</b> gives his take on the appearance of the formidable Thumpers at Cavern.</p>
    </div>
</div>

The Call

// Slider
        slidr.create('featured', {
          breadcrumbs: true,
          controls: 'border',
          keyboard: true,
          theme: '#498c34',
          touch: true,
          transition: 'cube'
        }).start();

turn off slider in portrait mode?

I am trying to turn off the slider and remove all its css when orientation is 0 (portrait) or when:
window.addEventListener("resize", function() {
if ( (document.documentElement.offsetWidth < document.documentElement.offsetHeight) || (window.matchMedia("screen and (orientation: portrait)").matches) ) {

// turn off slider and reset original css

} else {
  slidr.create('panels-container', {
    controls: 'none',
    fade: true,
    overflow: true,
    keyboard: true,
    touch: true
  }).start();

}

Is there a way to do this? I have tried to .removeAttr('style data-style') but I need to return to original css before slider was attached.

here is my hack solution which uses a reload (not-good):

window.onload = function() {
var smLoad = window.sessionStorage.getItem('smLoad'),
bgLoad = window.sessionStorage.getItem('bgLoad'),

  smallLoad = function() {
    if (smLoad && smLoad === 'false' || !smLoad) {
      console.log('small');
      location.reload();
    }
  },

  bigLoad = function() {
    if (bgLoad && bgLoad === 'false' || !bgLoad) {
      console.log('big')
      location.reload();
    }
  };

if ( (document.documentElement.offsetWidth < document.documentElement.offsetHeight) || (window.matchMedia("screen and (orientation: portrait)").matches) ) {
console.log('portrait');
slidr.create('panels-container').stop();
window.sessionStorage.setItem('smLoad', 'true');
window.sessionStorage.setItem('bgLoad', 'false');
} else if ( (document.documentElement.offsetWidth > document.documentElement.offsetHeight) || (window.matchMedia("screen and (orientation: landscape)").matches) ) {
console.log('landscape');
slidr.create('panels-container', {
controls: 'none',
fade: true,
overflow: true,
keyboard: true,
touch: true
}).start();
window.sessionStorage.setItem('bgLoad', 'true');
window.sessionStorage.setItem('smLoad', 'false');
}

window.addEventListener("resize", function() {
if ( (document.documentElement.offsetWidth < document.documentElement.offsetHeight) || (window.matchMedia("screen and (orientation: portrait)").matches) ) {
smallLoad();
} else if ( (document.documentElement.offsetWidth > document.documentElement.offsetHeight) || (window.matchMedia("screen and (orientation: landscape)").matches) ) {
bigLoad();
}
}, false);

window.addEventListener("orientationchange", function() {
var orientation = (window.orientation != undefined);
console.log('orientationChange ' + orientation);
if (orientation === 0) {
smallLoad();
}
if (orientation === -90 || orientation === 90) {
bigLoad();
}
}, false);

}

Easiest way to wrap breadcrumbs?

I tried using this, but it doesn't seem to work.

$('#my-slideshow-breadcrumbs').wrap("

");

Any ideas? Thanks for any help!

ui-router and slidr

I have implemented a very simple slidr in my website. However when I load the page where the slidr is with ui-router (similar to ajax), the slidr brake up. Any idea?

Responsive ?

Is it even possible to make it responsive compatible? It always scales to 1920 version.

Bower support?

Can you maybe make a bower.json?

Link with Thumbnail Cursorial

i need a Thumbnail Cursorial slider
Is it possible to make this option ?

Fallback for older browsers

Hi Brian

I know you developed this for cutting edge browsers however I was wondering if you could recommend a fallback situation for IE8 for example. Not saying some crazy effects but just a simple manual slide ability.

Is there something you would recommend?

Thanks

Window resizing support

How to support the slidr when you resize the window?
$( window ).resize(function() {}); Like this in jQuery

jQuery version

Hello,

Thanks for this plugin which looks very great, I'm testing it for a project.

However, could we hope a jQuery version ?
It would lighten the script (extend method, etc...), and many projects already use jQuery, so I think it would be nice to have the 2 versions.
A jQuery version would let also to bind events, trigger custom events on transitions, etc...

I can help to this if necessary.

Thanks

Controls position

Hey!
I was wondering if there's any possibility of placing the controls at the upper corner of the slider.
Thank you

IE11 and Breadcrumbs

Hi,

I am currently testng your (wonderful) slider for one of my site, but I have a compatibility problem with (guess who) Internet Explorer 11.

The Slider is working perfectly fine, but for a reason i can't define, the Slidr breadcrumbs (the "dots") are not clickable on my version of IE11. The dots will change perfectly as the slides moves but it's impossible to click on it.

I did some research into my code to find this glitch, but after a few hours on it, I coudn't fine anything wrong or misplaced. So I decided to try your online version of the slider on, the one you can find here : http://www.bchanx.com/slidr#docs. But same problem...

I tried to look into it but I still have no idea where the problem is, but I guess you might have a better chance than me !

Thanks in advance for the help and great job, you're slidr rocks !

For info : I'am using IE 11.0.4 with Win 7 64 bits.

Callback

Any plans to implement a callback function when the transition is complete?

Replace not add?

Is there an easy way to replace the added slides with a new set?
Essentially in function add() where:

@param {boolean=} opt_overwrite Whether to overwrite existing slide mappings/transitions if conflicts occur.

Rather than "Overwrites where conflicts occur" - I'd like something that "Overwrites all mappings".

E.G.
HTML

<div id="js-slidr">
    <div data-slidr="one" style="background-color: green)"></div>
    <div data-slidr="two" style="background-color: yellow"></div>
    <div data-slidr="three" style="background-color: grey"></div>
    <div data-slidr="four" style="background-color: red"></div>
    <div data-slidr="five" style="background-color: pink"></div>
    <div data-slidr="six" style="background-color: blue"></div>
</div>
<a href="#" id="js-replace">Replace</a>

JS

var s = slidr.create('js-slidr')
.add('h', ['one', 'two', 'three', 'one'])
.start();

$('#js-replace').click(function(){     
    // replace 123 with 456
    s.add('h', ['four', 'five', 'six', 'four']);
});

Dynamic resizing question

Dear Brian

a question in regards resizing. I am playing with a slider here: http://hipsta.samuellarcher.net/

I set the height of the slider container to a set height of 200px. As far as I understand the slider should resize the images based on the set size but it doesnt seem to do so.
The images are set to max-width: 100% so they are by nature scalable however even if I do not set a static size the slider does not scale. It seems that width and height values are applied via the JS and they do not change when resizing the browser window.

Am I doing something wrong here or is there an issue?

Thanks
Sam

next page/part of content

Controls and breadcrumbs always above fixed div

Hi

I am using your great slider for my current project.

Problem: The controls and breadcrumbs always scroll over my fixed navigation bar. How can I solve this problem?

Thanks.

Move to the next slide method

Hi,

Great library to have, i was wondering if I have to implement scroll/swipe then I'd need a method something like the existing method 'slide' which will also take 'next' as an argument along with 'left, right, up, down'.

Thanks

Cannot read property 'x' of undefined

Hey there,

I just ran into an issue with dynamically added slides. I load some content via ajax and then add a new slide set like this:

slidrInstance.add('v', [pageNumber]);

In the next line I try to go to the new slide but just get this Error Message (Cannot read property 'x' of undefined)

slidrInstance.slide(pageNumber);

As far as I can tell from the markup, the slide seems to be added propperly. Even canSlide returns true. Any idea what's wrong here?

Continues sliding?

Nice script, but is there a way to let the slidr keep on sliding? Now it stops after all slides went by. I have the a auto(3000) already.

Change Slide with a Navbar

I would like to change the content of the whole page with a navbar on the top.

Is there a slidr.goTo( "someSlide" ) function that I can call when an element in the navbar is clicked?

Multiple sliders

Hi,

I got a problem using the slider multiple times. The page is: http://www.communityinnovations.com.au/corporate-social-responsibility/

I checked the code several times. ID#'s are correct and matching. But the statistics slider is not working.

Ideas?

Slidr added to twitstrap resources

Hello,
We have just add Slidr to twittstrap resources list
http://www.twittstrap.com/resources/details/slidr
Under : Components
Regards

Next Prev in auto mode

Hi! When the slider is running in auto mode and I move to the next slide or previous timer is not reset and the next transition is faster than it need. What can i do for fix it? And another question: pause does not working on hover. Any idea why?

pauseOnMouseHover Effect

Hi.
I was wondering if a pauseOnHover (true/false) config parameter setting could be implemented and added to the mix.

Let me know if you ever get around to it.

Creating Sub Categorie Slider

Is it possible to make slider if I have 5 main categories of images and each has 3 subcategories..?

Error className of null

Hey !
I turn around in my seat for an hour... I have a weird problem i can't understand.

My main goal is to use the slider with masonry to add a custom gallery view popin.
On my localhost, I instanciate the plug-in and it works.
I'm putting my code on production and my my chrome crash on this error :

Uncaught TypeError: Cannot read property 'className' of null (slidr.js:69)
classname slidr.js:69
controls.update slidr.js:680
actions.start slidr.js:1140
api.start slidr.js:1268
(anonymous function)

I was thinking about a code conflict with my others js scripts but same scripts work well on localhost. I'm using Chrome and I do not know what to do...

I have no idea about this problem i'm trying to resolve...
Thanks !

Swipe functionality

Hey, this looks great! Just wondering if you're planning on adding swipe functionality for mobile devices? Keep up the good work 😄

Controls not work in opera 20

In opera 20 ( OS windows ), when i click to control button, slides not change.

Auto slide

Hi Brian

not a bug - just a question if you could provide a code snippet which shows a demo for slider on auto so that it slides to the next slides with some delay between slides.

I know there is the 'auto' function but can't make it work.

Thanks Brian

Support for IE 8/9?

Any plans to support IE 8/9? The script gives an Object Not found at Line 11. Is there a quick fix for it?

Example

Hi! Lovely plugin! I'm just wondering if it's possible to show an example or a comprehensive tutorial on how to implement those 3 slides in the same page in your documentation page (apple-banana-coconut). I can't seem to make it work. Thank you :)

auto function

Hi, well I'm not so experienced on js so I didn't get how to implement the auto function. Actually I did it but only goes forward and I wanted it to go backward when it reaches the last "data-slidr". Could you give me some tip pls?

Here follows the script:

$(document).ready(function() { slidr.create('slidr-div', { breadcrumbs: true, controls: 'none', direction: 'h', fade: true, overflow: true, theme: '#fff', timing: { 'fade': '1s ease-in' }, transition: 'linear' }).auto(3000, 'right'); });

Thanks in advance.

Eternal Slider

Hi bchanx.
I got an Idea on how to make slidr.js eternal :)
Here take a look:
http://codepen.io/Vin-ni/full/Pwwbym/

Thanks a lot for this carousel.
Love it so far :)

[Slidr] Error adding [horizontal] slides for [testimonials-slider].

Hi! I can't make my slider infinitely. Console shows me warning message "[Slidr] Error adding [horizontal] slides for [testimonials-slider]". What does it mean?

slidr.create('testimonials', {
    breadcrumbs: true,
    overflow: true
}).add('horizontal', ['one', 'two', 'three', 'one']).start();

   <div class="testimonials">
      <div class="testimonials__content" id="testimonials-slider">
         <div class="testimonial" data-slidr="one">

         </div>
         <div class="testimonial" data-slidr="two">

         </div>
         <div class="testimonial" data-slidr="tree">

         </div>
      </div>
   </div>

Responsive

Hi, it breaks very hard on responsive websites..

IE not transitioning

Was able to get the transitions to work in Chrome, FF, and Sarafi; nevertheless the transitions are not being applied in IE.

After doing some research, it appears the animation styles are not being applied in IE.

Any thoughts?

Thanks in advance

pause on hover is not working

Hi,
I've tried to set the pause on hover feature.

All I have done is to set "pause: true" like this:
var latestNewsSlidr = slidr.create('slidr-ul', {
99 breadcrumbs: false,
100 controls: 'none',
101 direction: 'horizontal',
102 fade: true,
103 overflow: true,
104 timing: { 'cube': '0.5s ease-in' },
105 transition: 'linear',
106 pause: true,
107 touch: true
108 }).add('h', ['one', 'two', 'three', 'one']).auto();

It doesn't seem to work. I've also put a console log in the source code, and every time i hover the slidr it log "paused", but it continues to slide.

// Automatically transition between slides.
1170 auto: function(, msec, direction) {
1171 if (.started && slides.isdir(direction)) {
1172 actions.stop(_);
1173 .auto.msec = msec;
1174 .auto.direction = direction;
1175 .auto.id = setInterval(function() {
1176 if (!(.settings['pause'] && nav.mouse.isOver(.id))) slides.slide(, direction);
1177 console.log("paused");
1178 }, msec);
1179 }
1180 },

I have done also another try:

latestNewsSlidr {

background: red;
}

When I hover it began red, but it continues to slide.

Any idea why?

Slide names in breadcrumbs...

Whats the easiest way of adding the "data-slidr" attribute as a name to go into each breadcrumb dot?