Hi! ich habe mir gerade mit viele Hilfe aus dem Internet einen eigenen Infinite Slider gebaut. Jetzt möchte ich diesen in meine Startseite integrieren. Wenn ich es aber direkt über den Styleedit mache und den Code dort einfüge, dann funktioniert er nicht so wie er soll. Gibt es eine Möglichkeit die HTML direkt in der Datenbank abzulegen oder den Code in eine vorhandene Datei zu schreiben? schöne Grüße Benedikt
@Admin-ALB Ohne den Code zu kennen, wird es unmöglich zu sagen wo und wie der Code eingebaut werden kann und muss. Es wäre viel einfacher, wenn du den Code hier posten würdest, weil dann kann man sehen was der Code macht und ggf. die richtigen Stellen im Shop dafür nennen.
@Till (Gambio) Danke für die schnelle Antwort. Na klar du hast Recht! Ich habe völlig vergessen denn Code mit hochzuladen. Hier der Code! Schöne Grüße Benedikt Code: <!DOCTYPE html> <html lang="de"> <head> <link href="https://www.albenisa-shop.de//templates/Honeygrid/usermod/css/Brandslider/style.css" rel="stylesheet"> </head> <body> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://www.albenisa-shop.de//templates/Honeygrid/usermod/css/Brandslider/bootstrap.min.css"> <!-- Slick Slider CSS --> <link rel="stylesheet" type="text/css" href="https://www.albenisa-shop.de//templates/Honeygrid/usermod/css/Brandslider/slick.css"/> <!-- jQuery first, then Bootstrap JS --> <script src="https://www.albenisa-shop.de//templates/Honeygrid/usermod/javascript/Index/jquery-3.4.1.slim.min.js"></script> <script src="https://www.albenisa-shop.de//templates/Honeygrid/usermod/javascript/Index/bootstrap.min.js"></script> <!-- Slick Slider JS --> <script src="https://www.albenisa-shop.de//templates/Honeygrid/usermod/javascript/Index/slick.min.js"></script> <div class="row"> <div class="container"> <section class="logo-carousel slider" data-arrows="true"> <div class="slide"><img src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image1.png"></div> <div class="slide"><img src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image2.png"></div> <div class="slide"><img src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image3.png"></div> <div class="slide"><img src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image4.png"></div> <div class="slide"><img src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image5.png"></div> <div class="slide"><img src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image6.png"></div> <div class="slide"><img src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image7.png"></div> <div class="slide"><img src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image8.png"></div> </section> </div> </div> <script> $(document).ready(function() { $('.logo-carousel').slick({ slidesToShow: 6, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, arrows: true, dots: false, pauseOnHover: false, responsive: [{ breakpoint: 768, settings: { slidesToShow: 4 } }, { breakpoint: 520, settings: { slidesToShow: 2 } }] }); }); </script> </body> </html>
@Admin-ALB Ich hab mir das nun genauer angesehen und muss sagen, der Code muss leider auseinader genommen werden, da CSS und JS nicht am selben Ort hier eingebunden werden kann. Das muss in mehrere Dateien aufgeteilt werden. jQuery und Bootstrap JS und Bootstrap CSS brauchst du gar nicht. Ich hab das mal vorbereitet: Das HTML muss im StyleEdit in ein HTML Widget eingefügt werden: HTML: <div class="row"> <div class="container"> <section class="logo-carousel slider" data-arrows="true"> <div class="slide"><img src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image1.png"></div> <div class="slide"><img src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image2.png"></div> <div class="slide"><img src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image3.png"></div> <div class="slide"><img src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image4.png"></div> <div class="slide"><img src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image5.png"></div> <div class="slide"><img src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image6.png"></div> <div class="slide"><img src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image7.png"></div> <div class="slide"><img src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image8.png"></div> </section> </div> </div> Das JS muss in eine Datei im Ordner /GXModules/TT/InfiniteScroller/Shop/Themes/All/javascript/Index/infiniteScroll.js Code: $(document).ready(function() { $('.logo-carousel').slick({ slidesToShow: 6, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, arrows: false, dots: false, pauseOnHover: false, responsive: [{ breakpoint: 768, settings: { slidesToShow: 4 } }, { breakpoint: 520, settings: { slidesToShow: 2 } }] }); }); Die JS Dateien slick.js und slick.min.js kopierst du nach: /GXModules/TT/InfiniteScroller/Shop/Themes/All/javascript/Index/slick.js /GXModules/TT/InfiniteScroller/Shop/Themes/All/javascript/Index/slick.min.js Die CSS Datei slick.css kopierst du nach /GXModules/TT/InfiniteScroller/Shop/Themes/All/css/slick.css Nicht vergessen im Gambio Admin den Modul-Cache und den Seitencache leeren
und übrigens...Gibt es eine Möglichkeit dich bei Gambio zu bewerten oder ähnliches, sodass du auch ein Nutzen hast? Wenn ja lass es mich gerne wissen, denn dann würde ich das machen! schöne Grüße Benedikt