قرار دادن اسلایدشو در قالب

**M.Abolhasani** · 04-09-2019 04:59 PM

با سلام
به تصویر زیر توجه کنید .
smartslideer1.jpg
این نمونه ای از اسلایدشو است که در بالای صفحه اصلی در قالب ایشاپ قرارداده شده است .

شما می تونید کامپوننت اسلایدرهوشمند 3 را از سایت جومی تهیه و برای نمایش اسلایدشو از آن استفاده نمایید .
لینک جزئیات اسلایدر هوشمند در سایت جومی :
https://www.joomi.ir/joomla-extensions/smartslider3

بعد از تهیه و نصب این افزونه از پنل مدیریت جوملا به مسیر زیر بروید .

منوی کامپوننت ها / اسلایدر هوشمند 3 / بر روی «*دکمه ویرایش » اسلاید نمونه ای که ایجاد کردید و تنظیمات آن آماده است کلیک کنید .( در اینجا فقط نحوه نمایش اسلاید ها در صفحه اصلی ایشاپ توضیح داده میشود سوالات مربوط به اسلایدر هوشمند وتنظیم آن را در بخش مربوط به اسلایدر هوشمند در لینک زیر مطرح بفرمایید .)

مسیر:

در قسمت پایین - کادر وسط  (مقالات این کد را در مقاله کپی کنید:)

کد را بردارید و در مقاله - ماژول سفارشی یا مطلب مورد نظر  برای نمایش قرار دهید .

در اینجا قرار است در مسیر زیر قرار داده شود.

منوی کامپوننت ها / ایشاپ / زبانه پنجم « سیستم » / زیر منوی « پیام ها »

به صفحه آخر و آخرین گزینه ( Shop Introduction ) بروید.

حتما»»» ابتدا ویرایشگر را در حالت کدنویسی code قرار دهید و سپس کد اشاره شده را در این قسمت قرار داده و ذخیره کنید .

توجه : شما می تونید در تنظیمات اسلایدر (اندازه صفحه - خودکار ) را انتخاب کنید تا به اندازه صفحه خالی نمایش داده شود.

بخش مربوط به (اسلایدر هوشمند 3) در انجمن سایت جومی :
اسلایدر هوشمند ۳ (smartslider 3)

**erfan** · 11-19-2022 11:30 PM

سلام
ببخشید در بالا فرمودین کد را بردارید..منطورتون کدوم کد و در کجاست؟
ضمننا" من یه ماژولی رو تو این مسیر فراخوانی کردم نیاورد!

با تشکر

**sportmall** · 11-20-2022 04:18 PM

اسپرت مال: اولین و بزرگترین مجله آنلاین ورزشی ایران

**erfan** · 11-21-2022 12:09 PM

سلام، چرا پاسختون خالی اومده است!

با تشکر

**erfan** · 12-29-2022 07:28 AM

سلام
این پست رو مجددا" خودم تکمیل میکنم شاید بدرد دوستان بخوره..
کم نتونستم اسلایدری مثالی رو توی اون مکان بیارم..و هیچ مازولی رو هم نتونستم فراخوانی کنم و کسی هم جواب درست درمونی بهم نداد!
اما از طریق کدHtml زیر شما میتونین به راحتی یه اسلایدر و یا چیز دیگه ای که بر پایه html است رو راخونی نمایید

کد HTML:

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Verdana, sans-serif;
        }

        .mySlides {
            display: none;
        }

        img {
            vertical-align: middle;
        }

        /* Slideshow container */
        .slideshow-container {
            max-width: 1000px;
            position: relative;
            margin: auto;
        }

        /* Caption text */
        .text {
            color: #f2f2f2;
            font-size: 15px;
            padding: 8px 12px;
            position: absolute;
            bottom: 8px;
            width: 100%;
            text-align: center;
        }

        /* Number text (1/3 etc) */
        .numbertext {
            color: #f2f2f2;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
        }


        .active {
            background-color: #717171;
        }

        /* Fading animation */
        .fade {
            animation-name: fade;
            animation-duration: 1.5s;
        }

        @keyframes fade {
            from {
                opacity: .4
            }

            to {
                opacity: 1
            }
        }

        /* On smaller screens, decrease text size */
        @media only screen and (max-width: 300px) {
            .text {
                font-size: 11px
            }
        }
    </style>
</head>

<body>

    <div class="slideshow-container">

        <div class="mySlides fade">
            <div class="numbertext">1 / 3</div>
            <img src="/images/your-image1.png" style="width:100%">
            <div class="text">Caption Text</div>
        </div>

        <div class="mySlides fade">
            <div class="numbertext">2 / 3</div>
            <img src="/images/your-image2.png" style="width:100%">
            <div class="text">Caption Two</div>
        </div>

    </div>
    <br>

    <div style="text-align:center">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
    </div>

    <script>
        let slideIndex = 0;
        showSlides();

        function showSlides() {
            let i;
            let slides = document.getElementsByClassName("mySlides");
            let dots = document.getElementsByClassName("dot");
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            slideIndex++;
            if (slideIndex > slides.length) {
                slideIndex = 1
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].className += " active";
            setTimeout(showSlides, 2500); // Change image every 3 seconds
        }
    </script>

<div id="webkulpwa_offline_bar">No Internet Connection</div><div id="wkpwa-loader-overlay"><div id="wkpwa-loader"><div class="cp-spinner cp-skeleton"></div></div></div>

</body>

</html>

موضوع: قرار دادن اسلایدشو در قالب

لینک بک ها

ابزارهای موضوع

نحوه نمایش موضوع

قرار دادن اسلایدشو در قالب

کاربر مقابل پست M.Abolhasani عزیز را پسندیده است:

کلمات کلیدی این موضوع

مجوز های ارسال و ویرایش