by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Rubinder Singh
    @Rubinder25
    dots: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    initialSlide: 0,
    infinite: true,
    arrows: false,
    mobileFirst: false,
    variableWidth: true,
    cssEase: 'ease-out',
    autoplay: true,
    speed: 1000,
    autoplaySpeed: 6000,
    swipeToSlide: false,
    touchThreshold: 100,
    centerMode: true,
    useTransform: false,
    focusOnSelect: true,
    pauseOnFocus: true,
    pauseOnDotsHover: true,
    pauseOnHover: true,
    className: 'marquee',
    rows: 1,
    responsive: [
    {
    breakpoint: 1260,
    settings: {
    centerMode: false,
    variableWidth: false,
    },
    },
    {
    breakpoint: 1024,
    settings: {
    autoplay: false,
    centerMode: false,
    variableWidth: false,
    },
    },
    ],
    Vishnu Paduchuri
    @vispaduchuri
    Hey, I am using the slider to display a set of images. after the user crosses some slide position I am calling another API and appending the new results with the existing results using old.concat(new). Each time when the API is called, the slider displays 2 rows and sometimes its height is changed.
    @phoenixTW once the API data is added to the array, is there is a glitch that disturbs the slider and then fixes after few seconds?
    Mike Broders
    @MikeBroders
    hey, i'm facing an issue where i have 2 slides, "fade" enabled and custom prev/next buttons. when i press one of the buttons (prev or next) the beforeChange method is triggered but the slides are not changing. if i disable "fade" the slides starting to change again as expected. is there anything i can do?
    karan_sidds
    @Karansidds
    Is there a way of achieving adaptive width just like it's in owl carousel. The adaptive width in owl carousel adjusts the width automatically. Is there any option in react slick to achieve that?
    mohamed-hashim-au3
    @mohamed-hashim-au3
    I'm new to slick slider is there any ease way to change the prev and next arrow icon to some custom icon ?
    Mike Broders
    @MikeBroders
    hey mohamed... create a component that represents the prev/next button and pass them to the options object of the slider...
    prevArrow: <SliderButton to='prev' />,
    nextArrow: <SliderButton to='next' />
    mohamed-hashim-au3
    @mohamed-hashim-au3
    Thanks @MikeBroders that really helps!!!
    karan_sidds
    @Karansidds
    Is there a way of achieving adaptive width just like it's in owl carousel. The adaptive width in owl carousel adjusts the width automatically. Is there any option in react slick to achieve that?
    Jelly Thomas
    @jellythomas
    hi, is there a way to move the slick-dots ul element to other div element outside slick container, i cant find the example
    i've try to look at the jquery appendDots example, and they only need to pass the element, can anyone help to give me the clue, thank you
    Mike Broders
    @MikeBroders

    hey, you could set the init-option "dots" to false and set one of the navigation methods of slick (slickGoTo, slickNext, slickPrev) on to the onClick function of any outside element

    see the docu:

    https://react-slick.neostack.com/docs/api#slickGoTo
    https://react-slick.neostack.com/docs/api#dots

    Jelly Thomas
    @jellythomas
    hi @MikeBroders thankyou for your advice, i've tried it and it succeed
    Tushar Shukla
    @tusharshuklaa
    Hey folks, I'm new to react and I have a certain use case I'm unable to figure out. I want to know when the carousel has loaded (along with all of its width computations and all...) and then load another component in slides. How to achieve this?
    Anthony Castrio
    @AnthonyCastrio_twitter
    Have a weird one.. when I load the react-slick carousel in a mobile screen width, images are swapped. Loads fine in normal widths and I'm using breakpoints. demo: https://www.loom.com/share/1341bebce14c41748a9eadb84256ba0e
      const settings = {
        autoplay: true,
        autoplaySpeed: 4000,
        arrows: false,
        centerMode: true,
        centerPadding: '0px',
        dots: true,
        infinite: true,
        initialSlide: selected,
        slidesToScroll: 1,
        slidesToShow: 3,
        focusOnSelect: true,
        speed: 500,
        afterChange: current => setSelected(current),
        responsive: [
          {
            breakpoint: 992,
            settings: {
              slidesToShow: 2,
            }
          },
          {
            breakpoint: 768,
            settings: {
              slidesToShow: 1,
            }
          }
        ]
      };
    All the text stays put, but the <img> elements get moved to the wrong slides.
    Mike Broders
    @MikeBroders

    try disable "dots" or try setting "lazyLoad"

    Type: ondemand/progressive

    these two options gave me some problems with slide ordering

    Pratik Gadhiya
    @cTxplorer
    Hello peeps :wave:, is there a standard way to stop scrolling horizontally & vertically) further past the last slide?
    Anthony Castrio
    @AnthonyCastrio_twitter
    Thanks @MikeBroders seems like those changes fixed it!
    Mike Broders
    @MikeBroders
    @pratk maybe setting "infinite" to false in the options will fix it for you
    infinite: false
    Pratik Gadhiya
    @cTxplorer
    @MikeBroders infinite is already set to false, still facing the issue
    Pratik Gadhiya
    @cTxplorer
    Here's what I am using for horizontal slider:
    {
        dots: false,
        infinite: false,
        prevArrow: <LeftArrow />,
        nextArrow: <RightArrow />,
        speed: 300,
        slidesToShow: 5,
        slidesToScroll: 2,
        vertical: false,
        verticalSwiping: false,
        variableWidth: true,
    }
    Along with this effect:
    useEffect(() => {
        if (selectedThumbnailIndex !== null) {
          if (sliderRef && sliderRef.current) {
            sliderRef.current.slickGoTo(selectedThumbnailIndex);
          }
        }
      }, [selectedThumbnailIndex]);
    Mike Broders
    @MikeBroders

    check additionally if the

    selectedThumbnailIndex

    exceeds the amount of slides...

    if (sliderRef && sliderRef.current && selectedThumbnailIndex >= 0 && selectedThumbnailIndex < itemcount) { sliderRef.current.slickGoTo(selectedThumbnailIndex); }
    Pratik Gadhiya
    @cTxplorer
    selectedThumbnailIndex is always in the range. I feel like I am doing something wrong with slidesToShow props. Will check out. Thanks, anyways :)
    Mike Broders
    @MikeBroders
    yeah... sorry. i need to see the behavior to say more...
    Vladilen Tsvetkov
    @tini2n
    howdy! somebody know how to call smth when positioning slides ready? the problem is before slick initialized the height of list is 0. this cause slides with content shrink for a while. giving opacity to .slick-initialized don't working because this class gives only once, but slider can be shown/hidden after initializing
    Shiroe
    @Shiroe
    Hello peeps! I'm facing a slight UI problem with the slider. My content height is variable (it automatically changes with each slide to fit content) but when I get to my highest slide then other slides retain the same height which results in a lot of blank space in the bottom. Any ideas?
    tuguldur
    @tuguldur
    Hello
    index.js:1 Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.
    
    * Move code with side effects to componentDidMount, and set initial state in the constructor.
    
    Please update the following components: InnerSlider, Slider

    code

    import Slider from "react-slick";
    const Scrollable = (props) => {
      const settings = {
        dots: false,
        infinite: true,
        speed: 500,
        // autoplay: true,
        // focusOnSelect: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        variableWidth: true,
      };
      return (
        <Slider {...settings} className="home-slider">
          <SliderItem style={{ width: "280px" }} name="wtf" />
          <SliderItem style={{ width: "280px" }} name="wtf1" />
          <SliderItem style={{ width: "280px" }} name="wtf2" />
        </Slider>
      );
    };
    export default Scrollable;

    any help?

    庭喵
    @catsheue_twitter

    Hi all. I am using slick.js in my react project. When I try snapshot testing, I wonder why there are errors like this

    C:\project\component>yarn test
    yarn run v1.22.4
    $ react-scripts test
     FAIL  src/storybook.test.js (8.795s)
      Storyshots
        Promotion/Carousel
          √ Default (17ms)
          √ Loading (2ms)
        Promotion/Slideshow
          × Default (42ms)
          √ Loading (2ms)
    
      ● Storyshots › Promotion/Slideshow › Default
    
        TypeError: Cannot read property 'querySelectorAll' of null
    
          at InnerSlider.checkImagesLoad (node_modules/react-slick/lib/inner-slider.js:372:31)
          at InnerSlider.componentDidUpdate (node_modules/react-slick/lib/inner-slider.js:223:13)

    Any idea?

    milevgeorgi
    @milevgeorgi
    I want to move slider dots to other element in the page. I am using slickNext() slickPrev() slickGoTo() in onClick method, but they throw error when clicked on... How is this possible ?
    jerrylouis
    @jerrylouis

    Hi All, I am using react-slick, I have an issue with the slides, the postion of the slide seems to go out of the container: here is the codesandbox link: https://codesandbox.io/s/react-slick-playground-lg8md?file=/index.css:188-193

    And the hosted link: https://lg8md.csb.app/

    Basically, what I'm trying to achieve is that by default the first/current slide is displayed larger by setting a variable width and the other slides are set to a smaller width. The slider works fine on the initial load, but the problem is when we click on next arrow and the slider position is overflowed/hidden and the image is only half visible (noticed something strange, when I did a resize of the window the it did position the slide correctly). Looks like the value of 'left' is calculated incorrectly. Any help is much appreciated. Thanks

    ryan_james_developer
    @ryancheta
    Hey all...question about conditionally hiding/displaying prevArrow and nextArrow...
    if the slider is at the beginning, hide prevArrow and if at the end of the list, hide nextArrow
    does anyone know if I can do this simply by setting a field in the settings object?
    Mike Broders
    @MikeBroders
    hey ryan... there is no option but you can utilize the onBeforeUpdate method to check the position of your slider
    or use the infinite option. then there is no beginning or end :)
    ryan_james_developer
    @ryancheta
    Hey Mike... is onBeforeUpdate a method or a property of the settings object?
    Mike Broders
    @MikeBroders
    sorry... its called beforeChange and an attribute of the slider component
    beforeChange={(current, next)=>{}}
    ryan_james_developer
    @ryancheta
    @MikeBroders nice. Thanks! Is current referring to the left most visible item in the carousel or the right most?
    ryan_james_developer
    @ryancheta
    Never mind. Got it
    Thomas Hood
    @I2obiN
    hey has anyone gotten this to work with the kentico sample application before?
    Solid Dev ; who loves to solve issue and make wonderful results.
    @AceBerry924
    Hello, Akiran
    How to display one item and half of the prev/next ones in react-slick?
    I tried to find solution but didn't yet
    @MikeBroders
    Mike Broders
    @MikeBroders

    hey aceberry,

    show 3 items at a time and slide by 1
    then its a thing of sizing the slider container to a width that only the half of the most left and most right slides is visible.
    there is no slick specific settinng to achieve that.

    additionally you could overlay the edges with elements that have a linear gradient attached to fade out the edge slides.