Card Slider Support: Plugin doesn't work

Hello! I use Flat UI theme. I made some blog posts, and I added Card Slider Plugin. I added the next lines to default.htm:

        <link rel="stylesheet" href="http://oct.pkurg.ru/plugins/pkurg/cardslider/assets/css/small-cardslider.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Here is the code of the blog page:

title = "Blog"
url = "/blog/:page?"
layout = "default"
is_hidden = 0

[blogPosts]
pageNumber = "{{ :page }}"
postsPerPage = 10
noPostsMessage = "Nothing is found"
sortOrder = "published_at desc"
categoryPage = "blog/category"
postPage = "blog/post"

[cardslider]
cardonslider = 3
maxCardItems = "{{ 12 }}"
interval = "{{ 3000 }}"
showdate = "frue"
dateformat = "m/d/Y"
postPage = "blog/post"
postPageSlug = ":slug"
exceptcategory = 1
categoryslug = "uncategorized"
showuncatpost = 0
sortorder = "random"
addCss = "frue"
image_width = 250
image_height = 150
mode = "crop"
==
<section id="layout-title">
<div class="container">
        <h3>{{ 'Blog'|_ }}</h3>
</div>
</section>

<section id="slider">
<div class="container">
    <div class="mt-5 mb-5">
        {% component 'cardslider' %}
    </div>
</div>
</section>

<div class="container">
    <div class="row">
        <div class="col-sm-9">
            {% component 'blogPosts' %}

            <div class="clearfix"></div>
        </div>

        <div class="col-sm-3">

            {% partial 'blog/sidebar' %}

        </div>
    </div>
</div>

What I'm doing wrong? Why this plugin doesn't work?

Last updated 4 years ago

chessmaster7359190

4 years ago

Here is my default.htm:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Flat UI - {{ this.page.title }}</title>
        <meta name="title" content="{{ this.page.meta_title }}">
        <meta name="description" content="{{ this.page.meta_description }}">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="OctoberCMS">
        <meta name="generator" content="OctoberCMS">
        <link rel="icon" type="image/png" href="{{ 'assets/images/logo.png'|theme }}">
        {% styles %}
        <link href="{{ [
            'assets/less/theme.less'
        ]|theme }}" rel="stylesheet">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <link rel="stylesheet" href="http://oct.pkurg.ru/plugins/pkurg/cardslider/assets/css/cardslider.css">
        <link rel="stylesheet" href="http://oct.pkurg.ru/plugins/pkurg/cardslider/assets/css/small-cardslider.css">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
        <!--[if lt IE 9]>
            <script src="{{ [
                'assets/javascript/html5shiv.js',
                'assets/javascript/respond.min.js',
            ]|theme }}"></script>
        <![endif]-->
    </head>
    <body class="page-{{ this.page.id }} layout-{{ this.layout.id }}">

        <!-- Header -->
        <header id="layout-header" class="header-navbar">
            <!-- Nav -->
            {% partial "nav" %}
        </header>

        <!-- Content -->
        <div id="layout-content">
            {% page %}
        </div>

        <!-- Footer -->
        <footer id="layout-footer">
            {% partial "footer" %}
        </footer>

        <!-- Scripts -->
        <script src="{{ [
            'assets/javascript/jquery.min.js',

            'assets/vendor/bootstrap/js/transition.js',
            'assets/vendor/bootstrap/js/alert.js',
            'assets/vendor/bootstrap/js/button.js',
            'assets/vendor/bootstrap/js/carousel.js',
            'assets/vendor/bootstrap/js/collapse.js',
            'assets/vendor/bootstrap/js/dropdown.js',
            'assets/vendor/bootstrap/js/modal.js',
            'assets/vendor/bootstrap/js/tooltip.js',
            'assets/vendor/bootstrap/js/popover.js',
            'assets/vendor/bootstrap/js/scrollspy.js',
            'assets/vendor/bootstrap/js/tab.js',
            'assets/vendor/bootstrap/js/affix.js',

            'assets/vendor/jquery-ui/js/jquery.ui.core.js',
            'assets/vendor/jquery-ui/js/jquery.ui.widget.js',
            'assets/vendor/jquery-ui/js/jquery.ui.mouse.js',
            'assets/vendor/jquery-ui/js/jquery.ui.position.js',
            'assets/vendor/jquery-ui/js/jquery.ui.button.js',
            'assets/vendor/jquery-ui/js/jquery.ui.slider.js',
            'assets/vendor/jquery-ui/js/jquery.ui.effects.js',
            'assets/vendor/jquery-ui/js/jquery.ui.touchpunch.js',

            'assets/vendor/flat-ui/js/video.js',
            'assets/vendor/flat-ui/js/bootstrap-switch.js',
            'assets/vendor/flat-ui/js/bootstrap-tagsinput.js',
            'assets/vendor/flat-ui/js/holder.js',
            'assets/vendor/flat-ui/js/typeahead.jquery.js',
            'assets/vendor/flat-ui/js/select2.js',
            'assets/vendor/flat-ui/js/flatui-radiocheck.js',

            'assets/javascript/app.js'
        ]|theme }}"></script>
        <script>
            videojs.options.flash.swf = "{{ 'assets/vendor/flat-ui/js/video-js.swf'|theme }}";
        </script>
        {% framework extras %}
        {% scripts %}

        <!-- FOR CARD SLIDER -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    </body>
</html>

chessmaster7359190

4 years ago

Please, help me with this problem.

Vladimir

4 years ago

Just add to layout

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Flat UI - {{ this.page.title }}</title>
        <meta name="title" content="{{ this.page.meta_title }}">
        <meta name="description" content="{{ this.page.meta_description }}">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="OctoberCMS">
        <meta name="generator" content="OctoberCMS">
        <link rel="icon" type="image/png" href="{{ 'assets/images/logo.png'|theme }}">
        {% styles %}
        <link href="{{ [
            'assets/less/theme.less'
        ]|theme }}" rel="stylesheet">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
        <!--[if lt IE 9]>
            <script src="{{ [
                'assets/javascript/html5shiv.js',
                'assets/javascript/respond.min.js',
            ]|theme }}"></script>
        <![endif]-->
    </head>
    <body class="page-{{ this.page.id }} layout-{{ this.layout.id }}">

        <!-- Header -->
        <header id="layout-header" class="header-navbar">
            <!-- Nav -->
            {% partial "nav" %}
        </header>

        <!-- Content -->
        <div id="layout-content">
            {% page %}
        </div>

        <!-- Mailing List -->
        <section id="layout-subscribe" class="subscribe-form">
            {% partial "subscribe" %}
        </section>

        <!-- Footer -->
        <footer id="layout-footer">
            {% partial "footer" %}
        </footer>

        <!-- Scripts -->
        <script src="{{ [
            'assets/javascript/jquery.min.js',

            'assets/vendor/bootstrap/js/transition.js',
            'assets/vendor/bootstrap/js/alert.js',
            'assets/vendor/bootstrap/js/button.js',
            'assets/vendor/bootstrap/js/carousel.js',
            'assets/vendor/bootstrap/js/collapse.js',
            'assets/vendor/bootstrap/js/dropdown.js',
            'assets/vendor/bootstrap/js/modal.js',
            'assets/vendor/bootstrap/js/tooltip.js',
            'assets/vendor/bootstrap/js/popover.js',
            'assets/vendor/bootstrap/js/scrollspy.js',
            'assets/vendor/bootstrap/js/tab.js',
            'assets/vendor/bootstrap/js/affix.js',

            'assets/vendor/jquery-ui/js/jquery.ui.core.js',
            'assets/vendor/jquery-ui/js/jquery.ui.widget.js',
            'assets/vendor/jquery-ui/js/jquery.ui.mouse.js',
            'assets/vendor/jquery-ui/js/jquery.ui.position.js',
            'assets/vendor/jquery-ui/js/jquery.ui.button.js',
            'assets/vendor/jquery-ui/js/jquery.ui.slider.js',
            'assets/vendor/jquery-ui/js/jquery.ui.effects.js',
            'assets/vendor/jquery-ui/js/jquery.ui.touchpunch.js',

            'assets/vendor/flat-ui/js/video.js',
            'assets/vendor/flat-ui/js/bootstrap-switch.js',
            'assets/vendor/flat-ui/js/bootstrap-tagsinput.js',
            'assets/vendor/flat-ui/js/holder.js',
            'assets/vendor/flat-ui/js/typeahead.jquery.js',
            'assets/vendor/flat-ui/js/select2.js',
            'assets/vendor/flat-ui/js/flatui-radiocheck.js',

            'assets/javascript/app.js'
        ]|theme }}"></script>
        <script>
            videojs.options.flash.swf = "{{ 'assets/vendor/flat-ui/js/video-js.swf'|theme }}";
        </script>
        {% framework extras %}
        {% scripts %}

    </body>
</html>

Last updated 4 years ago

Vladimir

4 years ago

test page

title = "test"
url = "/test"
layout = "default"
is_hidden = 0

[blogPosts]
pageNumber = "{{ :page }}"
postsPerPage = 10
noPostsMessage = "No posts found"
sortOrder = "published_at desc"
categoryPage = 404
postPage = "blog/post"

[cardslider]
cardonslider = 4
maxCardItems = 12
interval = 8000
showdate = "frue"
dateformat = "m/d/Y"
postPage = "blog/post"
postPageSlug = ":slug"
exceptcategory = 1
showuncatpost = "false"
sortorder = "desc"
addCss = "frue"
image_width = 250
image_height = 150
mode = "crop"
==
<div class="container">

{% component 'cardslider' %}    

</div>

chessmaster7359190

4 years ago

Vladimir said:

Just add to layout

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
       <title>Flat UI - {{ this.page.title }}</title>
       <meta name="title" content="{{ this.page.meta_title }}">
       <meta name="description" content="{{ this.page.meta_description }}">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta name="author" content="OctoberCMS">
       <meta name="generator" content="OctoberCMS">
       <link rel="icon" type="image/png" href="{{ 'assets/images/logo.png'|theme }}">
       {% styles %}
       <link href="{{ [
           'assets/less/theme.less'
       ]|theme }}" rel="stylesheet">

       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
       <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
      <!--[if lt IE 9]>
          <script src="{{ [
              'assets/javascript/html5shiv.js',
              'assets/javascript/respond.min.js',
          ]|theme }}"></script>
      <![endif]-->
   </head>
   <body class="page-{{ this.page.id }} layout-{{ this.layout.id }}">

       <!-- Header -->
       <header id="layout-header" class="header-navbar">
           <!-- Nav -->
           {% partial "nav" %}
       </header>

       <!-- Content -->
       <div id="layout-content">
           {% page %}
       </div>

       <!-- Mailing List -->
       <section id="layout-subscribe" class="subscribe-form">
           {% partial "subscribe" %}
       </section>

       <!-- Footer -->
       <footer id="layout-footer">
           {% partial "footer" %}
       </footer>

       <!-- Scripts -->
       <script src="{{ [
           'assets/javascript/jquery.min.js',

           'assets/vendor/bootstrap/js/transition.js',
           'assets/vendor/bootstrap/js/alert.js',
           'assets/vendor/bootstrap/js/button.js',
           'assets/vendor/bootstrap/js/carousel.js',
           'assets/vendor/bootstrap/js/collapse.js',
           'assets/vendor/bootstrap/js/dropdown.js',
           'assets/vendor/bootstrap/js/modal.js',
           'assets/vendor/bootstrap/js/tooltip.js',
           'assets/vendor/bootstrap/js/popover.js',
           'assets/vendor/bootstrap/js/scrollspy.js',
           'assets/vendor/bootstrap/js/tab.js',
           'assets/vendor/bootstrap/js/affix.js',

           'assets/vendor/jquery-ui/js/jquery.ui.core.js',
           'assets/vendor/jquery-ui/js/jquery.ui.widget.js',
           'assets/vendor/jquery-ui/js/jquery.ui.mouse.js',
           'assets/vendor/jquery-ui/js/jquery.ui.position.js',
           'assets/vendor/jquery-ui/js/jquery.ui.button.js',
           'assets/vendor/jquery-ui/js/jquery.ui.slider.js',
           'assets/vendor/jquery-ui/js/jquery.ui.effects.js',
           'assets/vendor/jquery-ui/js/jquery.ui.touchpunch.js',

           'assets/vendor/flat-ui/js/video.js',
           'assets/vendor/flat-ui/js/bootstrap-switch.js',
           'assets/vendor/flat-ui/js/bootstrap-tagsinput.js',
           'assets/vendor/flat-ui/js/holder.js',
           'assets/vendor/flat-ui/js/typeahead.jquery.js',
           'assets/vendor/flat-ui/js/select2.js',
           'assets/vendor/flat-ui/js/flatui-radiocheck.js',

           'assets/javascript/app.js'
       ]|theme }}"></script>
       <script>
          videojs.options.flash.swf = "{{ 'assets/vendor/flat-ui/js/video-js.swf'|theme }}";
       </script>
       {% framework extras %}
       {% scripts %}

   </body>
</html>

Unfortunately, it didn't help. :..\

Vladimir

4 years ago

example: http://oct.pkurg.ru/test

chessmaster7359190

4 years ago

Vladimir said:

example: http://oct.pkurg.ru/test

Well, I don't know why, but my site doesn't work. I think I should remake it from beginning :|. Thank you for help. By the way, when including bootstrap some elements break a little. You can look on Search, Pagination, and Hamburger menu in your example (the same occurs with my site).

Vladimir

4 years ago

By the way, when including bootstrap some elements break a little. You can look on Search, Pagination, and Hamburger menu in your example (the same occurs with my site).

add

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

before

    <link href="{{ [
            'assets/less/theme.less'
        ]|theme }}" rel="stylesheet">

like this

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        {% styles %}
        <link href="{{ [
            'assets/less/theme.less'
        ]|theme }}" rel="stylesheet">

chessmaster7359190

4 years ago

Yeah, I put it like this. Thank you. But again I get the same. Prev and Next glyphicon buttons are not visible. And slides are not changed automatically. What can it be?

chessmaster7359190

4 years ago

Hm. I made all the same with new Flat UI template, which was pure like a virgin, which lives on the pure and wide open spaces of the highest mounting Everest. And guess what? It works. I have no mood to rewrite again what I've already done in the template which I use, so I want to understand why Prev and Next glyphicon buttons are not visible. So I'm thinking.

Vladimir

4 years ago

I don't know how to help you. Here's a theme from my example: https://drive.google.com/file/d/1ztUttM46qiDeXRjYmfJdulSTTP7KWFpV/view?usp=sharing

Card Slider

Latest from the blog

October CMS Celebrates 10 Years with the v3.7 Release