module content slider

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • domdom
    Member
    • Oct 2018
    • 98
    • 5.6.4

    module content slider

    Hello the team,

    How to link (with a JSON request) in the content slider module images located in any subfolder of the public_html folder on my server?

    Greetings.

    Domi
  • Mark.B
    vBulletin Support
    • Feb 2004
    • 24286
    • 6.0.X

    #2
    Originally posted by domdom
    Hello the team,

    How to link (with a JSON request) in the content slider module images located in any subfolder of the public_html folder on my server?

    Greetings.

    Domi
    This isn't possible without custom code...the content slider can only display images attached to the posts.
    MARK.B
    vBulletin Support
    ------------
    My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
    My Unofficial vBulletin Cloud Demo: https://www.adminammo.com

    Comment

    • domdom
      Member
      • Oct 2018
      • 98
      • 5.6.4

      #3
      Okay, thanks for the answer. Unfortunately, too bad for me.
      Regards.

      Domi

      Comment

      • Wayne Luke
        vBulletin Technical Support Lead
        • Aug 2000
        • 73981

        #4
        If you want a slider that just shows a directory of images, you can use any jQuery Carousel plugin that supports that. Put the code for your Carousel in a Static HTML Module and place it on the page.
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API

        Comment

        • domdom
          Member
          • Oct 2018
          • 98
          • 5.6.4

          #5
          Sorry, but I don't know how to configure a jquery carousel.
          Regards

          Comment

        • domdom
          Member
          • Oct 2018
          • 98
          • 5.6.4

          #6
          thanck Omnibusthank you omnibus, I will try this solution.

          Regards.

          Domi

          Comment

          • domdom
            Member
            • Oct 2018
            • 98
            • 5.6.4

            #7
            Hello

            I tried as in the tutorial on the slick site, in an html module, but without success. as I can't put an html tag or head or footer in an html module since they are already present in the forum page...

            It's easy for you who had a great knowledge of jQuery, Ajax, php etc....
            But for the novices..... well, all we have to do now is close the shop.

            Good Luck...

            Comment


            • In Omnibus
              In Omnibus commented
              Editing a comment
              You should be able to use the code without header or footer tags.
          • domdom
            Member
            • Oct 2018
            • 98
            • 5.6.4

            #8
            Thank you but I'm leaving vBulletin to another cms easier to use for beginners.

            The problem on this forum is that we always get answers but without any concrete, real details, or even a tutorial that could help beginners. So I prefer to stop with vBulletin.

            Regards

            Comment

            • Mark.B
              vBulletin Support
              • Feb 2004
              • 24286
              • 6.0.X

              #9
              You don't put html head tags into an html module as the module sits within a page that already has them.

              What you're describing is difficulties understanding html and other general internet technologies, that isn't going to change regardless of platform.

              vBulletin can assist you with configuring modules and configuring the vBulletin software in general, we can't however provide a tutorial on writing html, jQuery, AJAX or php, those can be found elsewhere. No forum software vendor is going to provide tutorials on those.
              MARK.B
              vBulletin Support
              ------------
              My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
              My Unofficial vBulletin Cloud Demo: https://www.adminammo.com

              Comment

              • domdom
                Member
                • Oct 2018
                • 98
                • 5.6.4

                #10
                I may be bad at html, but I still know that you shouldn't include header, footer... tags in an html module since they are already present in vBulletin...

                Considering the few tutorials about vBulletin and carousels (unless you have more information than me, links for example?), I will try to find and understand.

                Learning by yourself is the best way to learn. Thank you for your precious help which will allow me to move forward at a fast pace.....

                Comment

                • domdom
                  Member
                  • Oct 2018
                  • 98
                  • 5.6.4

                  #11
                  This code works very well when placed in a blank html page.

                  Unfortunately, this is not the case in vBulletin in an html module.

                  If anyone had an answer, I'd be happy to!

                  Thank you

                  ===================================
                  <link rel="stylesheet" type="text/css" href="https://www.eep-france.net/js/slick/slick/slick.css">
                  <link rel="stylesheet" type="text/css" href="https://www.eep-france.net/js/slick/slick/slick-theme.css">
                  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
                  <style type="text/css">

                  .slider {
                  width: 50%;
                  margin: 100px auto;
                  }

                  .slick-slide {
                  margin: 0px 20px;
                  }

                  .slick-slide img {
                  width: 100%;
                  }

                  .slick-prev:before,
                  .slick-next:before {
                  color: black;
                  }

                  .slick-slide {
                  transition: all ease-in-out .3s;
                  opacity: .2;
                  }

                  .slick-active {
                  opacity: .5;
                  }

                  .slick-current {
                  opacity: 1;
                  }
                  </style>


                  <section class="single-item slider">
                  <div>
                  <img src="https://www.eep-france.net/images/site_eep_france/Gallerie-main/austria-768x432.jpg">
                  </div>
                  <div>
                  <img src="https://www.eep-france.net/images/site_eep_france/Gallerie-main/eurostart_1920.jpg">
                  </div>
                  <div>
                  <img src="https://www.eep-france.net/images/site_eep_france/Gallerie-main/sweden_1920.jpg">
                  </div>
                  <div>
                  <img src="https://www.eep-france.net/images/site_eep_france/Gallerie-main/train_10_1920.jpg">
                  </div>
                  <div>
                  <img src="https://www.eep-france.net/images/site_eep_france/Gallerie-main/train_8_1920.jpg">
                  </div>
                  <div>
                  <img src="https://www.eep-france.net/images/site_eep_france/Gallerie-main/train_in_snow_1920.jpg">
                  </div>
                  <div>
                  <img src="https://www.eep-france.net/images/site_eep_france/Gallerie-main/bridge_1920.jpg">
                  </div>
                  </section>

                  <script src="https://www.eep-france.net/js/slick/slick/slick.js" type="text/javascript"></script>
                  <script type="text/javascript">
                  $(document).on('ready', function() {
                  $(".single-item").slick({
                  infinite: true,
                  fade: false,
                  speed: 2000,
                  autoplaySpeed: 5000,
                  autoplay: true
                  });
                  });
                  </script>

                  ==================================

                  Comment

                  • Mark.B
                    vBulletin Support
                    • Feb 2004
                    • 24286
                    • 6.0.X

                    #12
                    CSS should go in the css.additional.css template. And without the style tags.
                    MARK.B
                    vBulletin Support
                    ------------
                    My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
                    My Unofficial vBulletin Cloud Demo: https://www.adminammo.com

                    Comment

                    • domdom
                      Member
                      • Oct 2018
                      • 98
                      • 5.6.4

                      #13
                      I removed the lines for the css and integrated it into the additional css but I still have the same problem.

                      Regards.

                      ==================================================================
                      <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
                      <style type="text/css">

                      .slider {
                      width: 50%;
                      margin: 100px auto;
                      }

                      .slick-slide {
                      margin: 0px 20px;
                      }

                      .slick-slide img {
                      width: 100%;
                      }

                      .slick-prev:before,
                      .slick-next:before {
                      color: black;
                      }

                      .slick-slide {
                      transition: all ease-in-out .3s;
                      opacity: .2;
                      }

                      .slick-active {
                      opacity: .5;
                      }

                      .slick-current {
                      opacity: 1;
                      }
                      </style>


                      <section class="single-item slider">
                      <div>
                      <img src="https://www.eep-france.net/images/site_eep_france/Gallerie-main/austria-768x432.jpg">
                      </div>
                      <div>
                      <img src="https://www.eep-france.net/images/site_eep_france/Gallerie-main/eurostart_1920.jpg">
                      </div>
                      <div>
                      <img src="https://www.eep-france.net/images/site_eep_france/Gallerie-main/sweden_1920.jpg">
                      </div>
                      <div>
                      <img src="https://www.eep-france.net/images/site_eep_france/Gallerie-main/train_10_1920.jpg">
                      </div>
                      <div>
                      <img src="https://www.eep-france.net/images/site_eep_france/Gallerie-main/train_8_1920.jpg">
                      </div>
                      <div>
                      <img src="https://www.eep-france.net/images/site_eep_france/Gallerie-main/train_in_snow_1920.jpg">
                      </div>
                      <div>
                      <img src="https://www.eep-france.net/images/site_eep_france/Gallerie-main/bridge_1920.jpg">
                      </div>
                      </section>

                      <script src="https://www.eep-france.net/js/slick/slick/slick.js" type="text/javascript"></script>
                      <script type="text/javascript">

                      $(document).on('ready', function() {
                      $(".single-item").slick({
                      infinite: true,
                      fade: false,
                      speed: 2000,
                      autoplaySpeed: 5000,
                      autoplay: true
                      });
                      });
                      </script>




                      Comment

                      • domdom
                        Member
                        • Oct 2018
                        • 98
                        • 5.6.4

                        #14
                        in the firefox debugger, I get this error message:

                        TypeError: $(...).slick is not a function

                        Comment

                        • Mark.B
                          vBulletin Support
                          • Feb 2004
                          • 24286
                          • 6.0.X

                          #15
                          You can only put css into that template. Nothing else. Certainly not script tags. They would stay in the html modules.
                          MARK.B
                          vBulletin Support
                          ------------
                          My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
                          My Unofficial vBulletin Cloud Demo: https://www.adminammo.com

                          Comment

                          Related Topics

                          Collapse

                          Working...