Fix carousel for genes with multiple summaries.

Author: Isaac1m

rnacentral/portal/static/css/gene.css

@@ -685,6 +685,26 @@ text-decoration: none;
 }
 
 /* Slick carousel overrides for litsumm */
+.gene__litsumm-carousel .slick-list {
+    overflow: hidden;
+}
+
+.gene__litsumm-carousel .slick-track {
+    display: flex;
+    align-items: stretch;
+}
+
+.gene__litsumm-carousel .slick-slide {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.gene__litsumm-carousel .slick-slide.slick-active {
+    visibility: visible;
+    opacity: 1;
+}
+
 .gene__litsumm-carousel .slick-prev {
     left: 0;
 }
@@ -698,6 +718,14 @@ text-decoration: none;
     color: #9e9e9e;
 }
 
+.gene__litsumm-carousel .slick-disabled {
+    cursor:not-allowed;
+}
+
+.gene__litsumm-carousel .slick-disabled:before {
+    opacity: 0.25;
+}
+
 .gene__litsumm-carousel .slick-dots {
     bottom: -30px;
 }

rnacentral/portal/templates/portal/gene_detail.html

@@ -37,32 +37,38 @@ <h4 class="alert-heading">Gene Not Found</h4>
     litsummSummaries: {{ litsummSummaries|safe }},
     geneFound: {{ geneFound|yesno:'true,false' }}
 };
+</script>
+{% endblock %}
 
-// Initialize litsumm carousel after AngularJS renders the content
+{% block extra_js_uncompressed %}
+<script>
 $(document).ready(function() {
     var litsummData = window.geneDetailData.litsummSummaries || [];
     if (litsummData.length > 1) {
-        // Wait for AngularJS to render the carousel items
+        // Poll until the carousel element exists and has items
+        var attempts = 0;
+        var maxAttempts = 50;
+
         var initCarousel = function() {
+            attempts++;
             var $carousel = $('#gene-litsumm-carousel');
-            var itemCount = $carousel.children('.gene__litsumm-panel').length;
 
-            if (itemCount >= litsummData.length && !$carousel.hasClass('slick-initialized')) {
-                $carousel.slick({
-                    draggable: true,
-                    rows: 1,
-                    dots: true,
-                    infinite: true,
-                    lazyLoad: 'ondemand',
-                    slidesToShow: 1,
-                    slidesToScroll: 1,
-                    arrows: true
-                });
-            } else if (itemCount < litsummData.length) {
-                // Retry if items not yet rendered
+            if ($carousel.length && $carousel.find('.gene__litsumm-panel').length > 0) {
+                if (!$carousel.hasClass('slick-initialized')) {
+                    $carousel.slick({
+                        draggable: true,
+                        dots: true,
+                        infinite: false,
+                        slidesToShow: 1,
+                        slidesToScroll: 1,
+                        arrows: true
+                    });
+                }
+            } else if (attempts < maxAttempts) {
                 setTimeout(initCarousel, 100);
             }
         };
+
         setTimeout(initCarousel, 500);
     }
 });