Error showing an image carousel in rx.mobile_only

[iacebedoherrera]

Describe the bug When I render an image carousel in desktop view, the carousel is shown correctly. But when I use rx.mobile_only, the carousel doesn´t appear if the screen width is lower than 992px.

To Reproduce

• Code/Link to Repo: I have this code that calls different functions:

  rx.desktop_only(
          product_detail()
      ),
      rx.mobile_and_tablet(
          product_detail_for_mobile(),
          width="100%"
      ),

  And these are the functions that are called:

  
  def product_detail() -> rx.Component:
  return rx.flex(
      photos_carousel(),
      product_info(),
      direction="row",
      align="center",
      justify="center",
      padding_top=Size.BIG.value,
      padding_bottom=Size.BIG.value,
      gap="10em",
      width="100%"
  )

def product_detail_for_mobile() -> rx.Component: return rx.flex( photos_carousel(), product_info(), direction="column", align="center", padding_top=Size.BIG.value, padding_bottom=Size.BIG.value, width="90%" )

The carousel is a JS component that I import on Reflex.

**Expected behavior**
The carousel must be shown in both desktop and mobile view.

**Screenshots**
In desktop view:
![image](https://github.com/user-attachments/assets/c123907f-35bd-4085-bcc6-c552c756f09e)
In mobile view:
![image](https://github.com/user-attachments/assets/1adc7d9a-c046-4597-a374-e61719fa4701)

**Specifics (please complete the following information):**
 - Python Version: 3.10.12
 - Reflex Version: 0.5.9
 - OS: Windows 11
 - Browser (Optional): Chrome

[Lendemor]

(edited OP to format the code properly)

[carlosabadia]

I'm not able to reproduce the issue. Can you share the carousel component?

[iacebedoherrera]

I'm not able to reproduce the issue. Can you share the carousel component?

Thank you for answering! This is the component that I'm using, but if you know of any other carousel that I can use, I would be happy to know.

def photos_carousel() -> rx.Component:
    return rx.flex(
        rx.html(
            """
            <div class="carousel-container">
                <div id="slideshow-container" class="slideshow-container"></div>
                <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                <a class="next" onclick="plusSlides(1)">&#10095;</a>
            </div>
            """
        ),
        rx.script(
            src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
        ),
        rx.script(
            """
            function carousel() {
                var pathname = window.location.pathname;

                var backendUrl = "http://localhost:8000";
                var rutaImagenes = backendUrl + pathname.replace('/products', '/images');
                console.log(rutaImagenes);

                $.get(rutaImagenes, function(data) {
                    if (data.image_paths) {
                        var imagePaths = data.image_paths;
                        var slideshowContainer = document.getElementById("slideshow-container");
                        slideshowContainer.innerHTML = ""; // Limpiar el contenedor antes de agregar imágenes nuevas

                        imagePaths.forEach(function(path) {
                            var adjustedPath = '/products/' + path;

                            var slide = document.createElement("div");
                            slide.className = "mySlides fade";

                            var img = document.createElement("img");
                            img.src = adjustedPath;
                            img.style.width = "100%";

                            slide.appendChild(img);
                            slideshowContainer.appendChild(slide);
                        });

                        var slideIndex = 1;
                        showSlides(slideIndex);

                        window.plusSlides = function(n) {
                            showSlides(slideIndex += n);
                        };

                        function showSlides(n) {
                            var i;
                            var slides = document.getElementsByClassName("mySlides");
                            if (n > slides.length) {slideIndex = 1}    
                            if (n < 1) {slideIndex = slides.length}
                            for (i = 0; i < slides.length; i++) {
                                slides[i].style.display = "none";  
                            }
                            slides[slideIndex-1].style.display = "block";  
                        }
                    } else {
                        console.log("No image paths found in response");
                    }
                }).fail(function(jqXHR, textStatus, errorThrown) {
                    console.log("Error fetching images: ", textStatus, errorThrown);
                });
            }
            """
        )
    )

[carlosabadia]

You can try with this reflex custom component https://github.com/picklelo/reflex-carousel

If you encounter any issues, feel free to post in the ‘help’ channel on our Discord

[iacebedoherrera]

Thank you so much, it helps me a lot with the image carousel and now it is shown correctly