Highlighted

[Locked] Full screen slide using Carousel.

Participant ,
Nov 18, 2018

Copy link to clipboard

Copied

Good evening. I'm looking to do a Carousel page on my website. I want to be able have the pictures cover the entire page, similar to when you add a image to the background of your website. Is this possible? And if so, what do I need to do, to make this possible?

TOPICS
Create Slideshows in Dreamweaver

Views

2.5K

Likes

Translate

Translate

Report

Report
This conversation has been locked.

[Locked] Full screen slide using Carousel.

Participant ,
Nov 18, 2018

Copy link to clipboard

Copied

Good evening. I'm looking to do a Carousel page on my website. I want to be able have the pictures cover the entire page, similar to when you add a image to the background of your website. Is this possible? And if so, what do I need to do, to make this possible?

TOPICS
Create Slideshows in Dreamweaver

Views

2.5K

Likes

Translate

Translate

Report

Report
Nov 18, 2018 0
Adobe Community Professional ,
Nov 18, 2018

Copy link to clipboard

Copied

Hi, Could do with some more detail so people can help you. is the website built with a framework like Bootstrap? If it is there a plenty Bootstrap Carousel examples.

Can you post a link to website/page?

There are plenty of 'drop in' solutions that would need a little bit of coding knowledge to implement, couple of examples

WOW Full Screen Slider

Full Screen/Window Slider - PC - Jssor Slider

Paul-M, ACP

Likes

Translate

Translate

Report

Report
Nov 18, 2018 2
Participant ,
Nov 18, 2018

Copy link to clipboard

Copied

Evening. Yes. It will made with Bootstrap. Here's an example via link.

NIGEL BARKER

Likes

Translate

Translate

Report

Report
Nov 18, 2018 0
Adobe Community Professional ,
Nov 18, 2018

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Nov 18, 2018 2
Adobe Community Professional ,
Nov 19, 2018

Copy link to clipboard

Copied

I don't know which framework they used, but your example site is not made with Bootstrap.   To answer your question about full screen width in Bootstrap, use container-fluid instead of container.

Bootstrap 4 Grid System

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Nov 19, 2018 2
Participant ,
Nov 19, 2018

Copy link to clipboard

Copied

Yes, I'm aware that the Nigel's website is not using Bootstrap. I had looked at his code last week. My sole purpose was to show "Energize" what I want to accomplish. I knew that it could be done, but I  was not sure and didn't want to make any assumptions, so I know/knew that I can get my answer to the question here, before I get into it. With that being said, I'll look at the replies and suggestions on here. Regarding the fluid-container, that is what I'm using. I haven't done this for a long time as well not having a lot of knowledge. But this gives me something to work. I need to learn how to code. I was only doing just enough to get my site up. But that's not good enough.

Likes

Translate

Translate

Report

Report
Nov 19, 2018 0
LEGEND ,
Nov 20, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

I don't know which framework they used, 

Me neither BUT if you widen and narrow the url that was posted it has issues - look at the nav in the top right corner jump over to the extreme left and crumble up........that's just a basic coding error and should never have been allowed to see the light of day if it was checked properly - BUT hey I guess I'll get accused of whatever by Ben for wanting things to look right and work correctly.

Likes

Translate

Translate

Report

Report
Nov 20, 2018 0
LEGEND ,
Nov 19, 2018

Copy link to clipboard

Copied

Legacys7  wrote

Good evening. I'm looking to do a Carousel page on my website. I want to be able have the pictures cover the entire page, similar to when you add a image to the background of your website. Is this possible? And if so, what do I need to do, to make this possible?

One below using a vue js plugin and a bit of bespoke coding:

<!DOCTYPE html>

<html lang="en" >

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>Vue-Swiper</title>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js'></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css'>

<style>

body {

margin: 0;

background-color: #000;

}

* {

box-sizing: border-box;

}

.swiper-container {

height: 100vh;

width: 100vw;

text-align: center;

}

.slide {

height: 100vh;

width: 80%;

background-size: cover;

background-position: center;

background-repeat: no-repeat;

margin: 0 auto;

}

@media screen and (max-width: 768px) {

.slide {

width: 100%;

}

}

img {

height: 100%;

max-width: 80%;

}

.swiper-button-prev, .swiper-button-next {

display: flex;

justify-content: center;

background-image: none!important;

color: #fff;

font-size: 35px;

height: auto!important;

}

@media screen and (max-width: 768px) {

.swiper-button-prev {

background-color: #000;

border-radius: 4px;

padding: 0 9px 0 5px;

}

.swiper-button-next {

background-color: #000;

border-radius: 4px;

padding: 0 5px 0 9px;

}

}

</style>

</head>

<body >

<div id="app">

<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide" v-for="image in images">

<div class="slide"  v-bind:style='{ backgroundImage: "url(" + image + ")", }'></div>

</div>

</div>

<div class="swiper-button-prev"><i class="fa fa-angle-left"></i></div>

<div class="swiper-button-next"><i class="fa fa-angle-right"></i></div>

</div>

</div>

<!-- end app -->

<script >

var app = new Vue({

el: '#app',

data: {

images:[

'https://source.unsplash.com/random/?nature',

'https://source.unsplash.com/random/?animal',

'https://source.unsplash.com/random/?food',

'https://source.unsplash.com/random/?people',

'https://source.unsplash.com/random/?fashion',

'https://source.unsplash.com/random/?business'

],

infinite: true

},

mounted: function () {

var mySwiper = new Swiper ('.swiper-container', {

centeredSlides:true,

direction: 'horizontal',

loop: this.infinite,

nextButton: '.swiper-button-next',

prevButton: '.swiper-button-prev',

});

}

})

</script>

</body>

</html>

Likes

Translate

Translate

Report

Report
Nov 19, 2018 2
Participant ,
Nov 20, 2018

Copy link to clipboard

Copied

This code is actually ideal for what I need. It's similar to the link that I'd sent as an example. BUT, when I'd added the code, all seem to work fine, until I go into the drop down menu, click on "fashion." But when I click on the drop down menu again, while on that page, the drop down doesn't want to open. As I'd already pointed out, my coding is lacking. So the information on here will help me, as well as gaining knowledge on the does and don't. FASHION

Likes

Translate

Translate

Report

Report
Nov 20, 2018 0
Adobe Community Professional ,
Nov 20, 2018

Copy link to clipboard

Copied

Fix your code errors. 

Showing results for http://michaelguydonphotography.com/fashion - Nu Html Checker

Bootstrap 4 requires jQuery, Popper and Bootstrap JS files.    I add scripts below the </footer> and above the </body> tags.

<!--latest jQuery Core-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Popper JS-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<!--latest Bootstrap 4 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Nov 20, 2018 1
Participant ,
Nov 20, 2018

Copy link to clipboard

Copied

Thank you again Nancy. It's VERY obvious at this point that there is a ton that I have to learn. Do you have any recommendations on learning the basics and going from there? Or what is your recommendation period?

Likes

Translate

Translate

Report

Report
Nov 20, 2018 0
Adobe Community Professional ,
Nov 20, 2018

Copy link to clipboard

Copied

First learn HTML5 and CSS.

HTML Tutorial

CSS Tutorial

If you intend to use Bootstrap,  do the tutorials and practice with the code in Try it Yourself demos.

Bootstrap 4 Tutorial

Later as your skills & confidence improve, learn to work with  JavaScript and jQuery.

JavaScript Tutorial

jQuery Introduction

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Nov 20, 2018 1
Mentor ,
Nov 20, 2018

Copy link to clipboard

Copied

Hi Legacy,

In the interest of full disclosure:

Nancy is a Bootstrap user. That is her thing. I am co-founder of the first company to make Dreamweaver extensions. Extensions are what made Dreamweaver a popular program. Quality extensions should be promoted because they make Dreamweaver a much better program. Adobe has drifted away from its roots and many talented coders who post here have a far different view of things than your typical ACP.

Bootstrap is severely bloated and its status is fairly polarized. Some people love it. Others hate it. However, it is not Adobe code. Adobe simply packs it inside Dreamweaver because they do not have an interest in making a home-grown page-layout engine... a ridiculously easy task for any advanced coder.

Please weigh the tips and responses you get in this forum very carefully, and note that the ACP label does not measure someone's coding, CSS, or scripting skills.

Likes

Translate

Translate

Report

Report
Nov 20, 2018 0
Adobe Community Professional ,
Nov 20, 2018

Copy link to clipboard

Copied

ALsp  wrote

Please weigh the tips and responses you get in this forum very carefully, and note that the ACP label does not measure someone's coding, CSS, or scripting skills.

Amen to that.

I make no apologies for using Bootstrap.  It's used by millions of RWD sites for a reason.  It cuts coding time by 2/3.  It lends itself very well to frontend and backend CMS development.  And when used correctly, Bootstrap is no more bloated than any other coding framework. 

Of course Al hates open source frameworks because they don't put money in his picket. Al uses (some might even say abuses) his ACP status to promote his company's extensions.  If you have a budget for them, great.   And if Adobe doesn't mind, I don't really  care what Al does.   But let's keep it real for everyone.  Al is a shill for PVII.   His opinions about open source frameworks must be taken with several grains of salt because 1) he doesn't use them and 2) doesn't understand how they work.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Nov 20, 2018 0
Participant ,
Nov 20, 2018

Copy link to clipboard

Copied

Deja Vu. This debate mirrors a debate on the forum when I'd asked a question a few years ago, and the debate went back and forth. I don't even know if I recall what my reply was back then. But what I do know is that it took over the actual topic. I'm going to stay on topic. For those on here that have a different approach, I'm cool with that. But let's keep it at that vs getting away from the actual topic and questions. So far, you've helped me on this, as well as others have, and I appreciate that. My last question, I hope that it gets answered, and not end up getting thread jacked.

Likes

Translate

Translate

Report

Report
Nov 20, 2018 0
Mentor ,
Nov 20, 2018

Copy link to clipboard

Copied

I'm a shill?

I am one of the reasons you have been able to find a home in this these forums, as are the other early extensions developers. I accepted an invitation to become an ACP under the understanding that I would be able to promote the extension community, which has dwindled to a precious few companies as a result of some of this forum's major posters.

You are so narrowminded and ignorant - and personally hurtful sometimes. I don't hate open source frameworks. If you would open your eyes you might see that if Dreamweaver used a well-written "framework" it would be a godsend for my company because instead of writing our own stuff from the damn ground up we could simply extend that framework. Do even understand how easy it would be for us to write a front-end for Bootstrap that works in Dreamweaver? I wonder sometimes who the "shill" actually is Nancy, and how lucrative this forum might in fact be for you.

I don't hijack threads. I just get sick of the nonsense I read every day.

Likes

Translate

Translate

Report

Report
Nov 20, 2018 0
Mentor ,
Nov 20, 2018

Copy link to clipboard

Copied

I apologize if you believe I've hijacked your thread. I get frustrated by the state of this forum sometimes and allegiance to Bootstrap professed. Given the nature of your posts you should be using a finished solution until you learn to code one yourself. The problem is that from a coding perspective, the solutions recommended so far are not good one - unless you are willing to sacrifice quality. On that note, and to ensure you get the help you obviously came here for, contact me off-list and I will provide any of our extensions to you at no cost.

I am not a shill. I've been helping Dreamweaver users far longer than you might know.

Likes

Translate

Translate

Report

Report
Nov 20, 2018 0
Participant ,
Nov 20, 2018

Copy link to clipboard

Copied

If you guys are going to debate, start another thread and have at it. I already got a red flag from you with another poster on here, where you got a bit sensitive on what was said. And yes, you are hijacking this. I don't need to read the love ad hate relationships. Let's stay on topic. Thank you. 

Likes

Translate

Translate

Report

Report
Nov 20, 2018 0
Mentor ,
Nov 20, 2018

Copy link to clipboard

Copied

Legacys7  wrote

If you guys are going to debate, start another thread and have at it. I already got a red flag from you with another poster on here, where you got a bit sensitive on what was said. And yes, you are hijacking this. I don't need to read the love ad hate relationships. Let's stay on topic. Thank you. 

If you can get a test page online and post a link to it, it will help get you a solution. I'm pretty sure I know what you want to do, but a proper solution would require seeing the code you are using, as well as the CSS and script. And my offer still stands. Contact me off-forum and I will give you a free Dreamweaver plugin to do what I think it is you want to do.

Likes

Translate

Translate

Report

Report
Nov 20, 2018 0
Participant ,
Nov 20, 2018

Copy link to clipboard

Copied

I'll do that. But so far, I've been getting solutions from the other members that have solved some of my problems. At this point, my issues and concern is getting some things modified and getting my code fix. I've got replies and solutions on those too. I do appreciate the offer and I got your point regarding what you think that I need. However, I still do need to learn how to code, sooner or later. Probably more sooner than later. But for the time being, the quicker solutions have been a big benefit, because I have to get my site up and running, pertaining to my profession.

The code that was sent to me from Osgood is what I need. It works, but I'm stuck at the pictures part, where they're not responsive for mobile devices. And the other issue is being able to put my images in that particular slider. I see in the code that the current images are just links to those pictures. I need to use my work in my saved folder. If I can't resolve that issue first, I'll email you off forum regarding the plugin that you're talking about. Here's my page with the slider. FASHION

Likes

Translate

Translate

Report

Report
Nov 20, 2018 0
Mentor ,
Nov 20, 2018

Copy link to clipboard

Copied

The code that was sent to me from Osgood is what I need. It works, but I'm stuck at the pictures part, where they're not responsive for mobile devices

You make images responsive with CSS:

img {

height: auto !important;

width: auto !important;

max-width: 100%;

}

But that won't work for you. Part of becoming a coder is using tools like Chrome's Developer Tools to analyze how something works. The slider you are using does not employ embedded images. An embedded image is an image that actually exists in your markup and is searchable. A lot of the open source plugins found on the web are made by coders who have learned to customize the mother JavaScript, but cannot really write a script from scratch. So, your plugin is actually rendering a background image. In order to make a background image responsive, you must make its physical container responsive and then either set the background to CSS cover/contain or manipulate the size of the container programmatically. I'm afraid this is a lot more complicated than you might think .

I could give you the CSS code to do this, but the script would need to be heavily modified as well. I'm sure Osgood could help you, but the important thing if you really want to learn to code is that you are taught how to do this, rather than given the code. Learning to write JavaScript is not a simple thing. If you use a free plugin you are kind of at the mercy of the script author (sometimes a true author does not even exist, because what's used are stubs, which are helper scripts to call functions in a library). Otherwise you're going to have problems in the future.

Se e if you can grab Osgood's attention to see if he is willing to help you. If he doesn't have the time to teach you, then feel free to contact me and I'll provide you with a UI for Dreamweaver that can get the job done for you.

Either way, best of luck to you.

Likes

Translate

Translate

Report

Report
Nov 20, 2018 0
LEGEND ,
Nov 21, 2018

Copy link to clipboard

Copied

The idea of using background images is that they work better in circumstances where you want to use them to 'cover' the complete screen. At some point i.e., when you get to mobile size they won't cover the screen without becoming distorted if they are 'inline' images, so a 'section' of the background-image is shown to cover the screen which keeps the image from becoming distorted BUT if you don't want to do that then you can use the images 'inline' - choose what images you use wisely for desktop so they are much higher than the screen, this allows the height of the image to be full depth of the screen and the width will just be what the width is (auto). Once you get to mobile size then the images wont be the depth of the screen any longer they will just become the depth of the original image in relationship to the mobile device being viewed on, just like the ones in the example url you provided function.

I've altered the code (see below) to allow that to happen and now you have 'inline' images instead of background images being sourced from an array of image links. So where you see this in the code - <img src="https://source.unsplash.com/random/?nature" alt="Nature"> you can alter that to your own images - <img src="images/image_1.jpg" alt="Image Description"> (where 'images' is the name of the folder in which your images reside in your website folder).

I would advise that you take Al up on his offer to review his extension at no cost to yourself, its a win win sitiuation. You may find it easier to implement but I'd also advise you to continue to learn to produce some coding and understand how things work. I dont think there is anything wrong with using extensions as long as you dont become totally depended on them and then can't therefore troubleshoot anything in instances where an extension may not be sufficient for what you require, that could be something ridiculously simple like wrapping a bit of text in a span tag to something much more complex. You'd be surprised how many can't perform the most simplest of coding tasks which are probably the most used when constructing a website.

<!DOCTYPE html>

<html lang="en" >

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>Vue-Swiper</title>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js'></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css'>

<style>

body {

margin: 0;

background-color: #000;

}

* {

box-sizing: border-box;

}

.swiper-container {

height: 100vh;

width: 100vw;

text-align: center;

}

@media screen and (max-width: 768px) {

.swiper-slide {

width: 100%;

}

}

img {

max-height: 100%;

max-width: 100%;

}

.swiper-button-prev, .swiper-button-next {

display: flex;

justify-content: center;

background-image: none!important;

color: #fff;

font-size: 35px;

height: auto!important;

}

@media screen and (max-width: 768px) {

.swiper-button-prev {

top: 100px;

background-color: #000;

border-radius: 4px;

padding: 0 9px 0 5px;

}

.swiper-button-next {

top: 100px;

background-color: #000;

border-radius: 4px;

padding: 0 5px 0 9px;

}

}

.caption {

color: white;

}

</style>

</head>

<body >

<div id="app">

<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide"><img src="https://source.unsplash.com/random/?nature" alt="Nature"></div>

<div class="swiper-slide"><img src="https://source.unsplash.com/random/?food" alt="Food"></div>

<div class="swiper-slide"><img src="https://source.unsplash.com/random/?business" alt="Business"></div>

<div class="swiper-slide"><img src="https://source.unsplash.com/random/?fashion" alt="Fashion"></div>

<div class="swiper-slide"><img src="https://source.unsplash.com/random/?animal" alt="Animal"></div>

</div>

<div class="swiper-button-prev"><i class="fa fa-angle-left"></i></div>

<div class="swiper-button-next"><i class="fa fa-angle-right"></i></div>

</div>

</div>

<!-- end app -->

<script >

var app = new Vue({

el: '#app',

data: {

infinite: true

},

mounted: function () {

var mySwiper = new Swiper ('.swiper-container', {

centeredSlides:true,

direction: 'horizontal',

loop: this.infinite,

nextButton: '.swiper-button-next',

prevButton: '.swiper-button-prev',

});

}

})

</script>

</body>

Likes

Translate

Translate

Report

Report
Nov 21, 2018 1
Participant ,
Nov 21, 2018

Copy link to clipboard

Copied

There is no point in including vue.js for a swiper with static slides. You can render it on page load, no need to be mounted via vue...

Likes

Translate

Translate

Report

Report
Nov 21, 2018 0
LEGEND ,
Nov 21, 2018

Copy link to clipboard

Copied

williamj31276244  wrote

There is no point in including vue.js for a swiper with static slides. You can render it on page load, no need to be mounted via vue...

Of course you can use alternative workflows..........please go ahead and supply your version.

Likes

Translate

Translate

Report

Report
Nov 21, 2018 0
Participant ,
Nov 21, 2018

Copy link to clipboard

Copied

It's pretty well explained how to initialize it: https://idangero.us/swiper/api/#initialize

You do not need to include a whole js framework for a pure javascript plugin, which can be initialized on load and run with static content.

You maybe don't get the idea of using front end frameworks like vue.js - it's not just including it on the page because it is trendy, especially when it does nothing on the page.

The swiper can be initialized as ANY other js function on the page....

Likes

Translate

Translate

Report

Report
Nov 21, 2018 0
Participant ,
Nov 21, 2018

Copy link to clipboard

Copied

Could you give me an example code? Like what Osgood posted. What Osgood has showed me works. However, I'm not keeping a closed mind. All knowledge that works, benefits me and I'm sure a lot of others on here.

Likes

Translate

Translate

Report

Report
Nov 21, 2018 0
LEGEND ,
Nov 21, 2018

Copy link to clipboard

Copied

williamj31276244  wrote

It's pretty well explained how to initialize it: https://idangero.us/swiper/api/#initialize

You do not need to include a whole js framework for a pure javascript plugin, which can be initialized on load and run with static content.

You maybe don't get the idea of using front end frameworks like vue.js - it's not just including it on the page because it is trendy, especially when it does nothing on the page.

The swiper can be initialized as ANY other js function on the page....

I use vue js and that's the solution I provided. If you care to read the thread it intitially DID use a directive repeat region which can only be evoked by using vue - why would I want to include all the extra inline divs and image mark-up when its more sensible these days to make the code more steamlined, maybe something which goes above and beyond your scope of thought?

Likes

Translate

Translate

Report

Report
Nov 21, 2018 0
Participant ,
Nov 21, 2018

Copy link to clipboard

Copied

Legacys7  wrote

Could you give me an example code? Like what Osgood posted. What Osgood has showed me works. However, I'm not keeping a closed mind. All knowledge that works, benefits me and I'm sure a lot of others on here.

Sure - you just need to strip half of the code, which is redundant in your case:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>Swiper</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/css/swiper.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.min.js"></script>

    <style>

        body {

            margin: 0;

            background-color: #000;

        }

       

        * {

            box-sizing: border-box;

        }

       

        .swiper-container {

            height: 100vh;

            width: 100vw;

            text-align: center;

        }

       

        @media screen and (max-width: 768px) {

            .swiper-slide {

                width: 100%;

            }

        }

       

        img {

            max-height: 100%;

            max-width: 100%;

        }

       

        .swiper-button-prev,

        .swiper-button-next {

            display: flex;

            justify-content: center;

            background-image: none!important;

            color: #fff;

            font-size: 35px;

            height: auto!important;

        }

       

        @media screen and (max-width: 768px) {

            .swiper-button-prev {

                top: 100px;

                background-color: #000;

                border-radius: 4px;

                padding: 0 9px 0 5px;

            }

            .swiper-button-next {

                top: 100px;

                background-color: #000;

                border-radius: 4px;

                padding: 0 5px 0 9px;

            }

        }

       

        .caption {

            color: white;

        }

    </style>

</head>

<body>

    <div id="app">

        <div class="swiper-container">

            <div class="swiper-wrapper">

                <div class="swiper-slide"><img src="https://source.unsplash.com/random/?nature" alt="Nature">

                </div>

                <div class="swiper-slide"><img src="https://source.unsplash.com/random/?food" alt="Food">

                </div>

                <div class="swiper-slide"><img src="https://source.unsplash.com/random/?business" alt="Business">

                </div>

                <div class="swiper-slide"><img src="https://source.unsplash.com/random/?fashion" alt="Fashion">

                </div>

                <div class="swiper-slide"><img src="https://source.unsplash.com/random/?animal" alt="Animal">

                </div>

            </div>

            <div class="swiper-button-prev"><i class="fa fa-angle-left"></i>

            </div>

            <div class="swiper-button-next"><i class="fa fa-angle-right"></i>

            </div>

        </div>

    </div>

    <!-- end app -->

    <script>

        var mySwiper = new Swiper( '.swiper-container', {

            centeredSlides: true,

            direction: 'horizontal',

            loop: this.infinite,

            nextButton: '.swiper-button-next',

            prevButton: '.swiper-button-prev',

        } );

    </script>

</body>

Likes

Translate

Translate

Report

Report
Nov 21, 2018 0
LEGEND ,
Nov 21, 2018

Copy link to clipboard

Copied

williamj31276244  wrote

Legacys7   wrote

Could you give me an example code? Like what Osgood posted. What Osgood has showed me works. However, I'm not keeping a closed mind. All knowledge that works, benefits me and I'm sure a lot of others on here.

Sure - you just need to strip half of the code, which is redundant in your case:


If you use the correct vue example I posted its your code that is redundant.....hummmm look at all those <div> and img

tags clogging up your code.....totally unnessary

Trying to get people to code correctly is a nigthmare in this forum....now go an use your other bloated method - Bootstrap and Wappler combination.

Likes

Translate

Translate

Report

Report
Nov 21, 2018 0
Participant ,
Nov 21, 2018

Copy link to clipboard

Copied

The user obviously is not using vue in his project and obviously he doesn't need to include vue to just initialize the swiper with static content.

Your brain is probably too old to get this.

Likes

Translate

Translate

Report

Report
Nov 21, 2018 0
LEGEND ,
Nov 21, 2018

Copy link to clipboard

Copied

williamj31276244  wrote

The user obviously is not using vue in his project and obviously he doesn't need to include vue to just initialize the swiper with static content.

Your brain is probably too old to get this.

The OP started off with a blank canvas....now youre implying Im old and yet using state of the art workflow rather than something from the past as youre suggesting using....I'll take that, maybe if you get your snout out of Wappler and Bootstrap you might learn something.

Likes

Translate

Translate

Report

Report
Nov 21, 2018 0
Mentor ,
Nov 21, 2018

Copy link to clipboard

Copied

Not going to happen. They are both highly addictive and require intensive rehab.

Likes

Translate

Translate

Report

Report
Nov 21, 2018 0
Participant ,
Nov 20, 2018

Copy link to clipboard

Copied

I have the slide page working. However, the pictures that are currently in the code are linked to a http. What do I need to do, where I can add my own content in the slide show as well as make it responsive for mobile devices?

Likes

Translate

Translate

Report

Report
Nov 20, 2018 0
Mentor ,
Nov 19, 2018

Copy link to clipboard

Copied

In addition to Ben's good suggestion, our extensions work perfectly in Bootstrap pages as well as in pages made with our page layout tools. This might be interesting to you. Certainly cleaner than the majority of Bootstrap and jQuery manual plugins and fully automated in Dreamweaver:

Art Gallery Magic Demos

Art Gallery Magic: In Motion Marketing

Likes

Translate

Translate

Report

Report
Nov 19, 2018 2
Participant ,
Nov 19, 2018

Copy link to clipboard

Copied

I like your slide demo. Very nice and clean. As I'd briefed in my post. My goal is to make it full screen. Similar to when you put a picture in your background to cover the entire page. I'll look more into what you have.

Likes

Translate

Translate

Report

Report
Nov 19, 2018 0
Mentor ,
Nov 19, 2018

Copy link to clipboard

Copied

Legacys7  wrote

I like your slide demo. Very nice and clean. As I'd briefed in my post. My goal is to make it full screen. Similar to when you put a picture in your background to cover the entire page. I'll look more into what you have.

Art Gallery has a full-screen option, which can also be invoked on page load. Full-screen can be further optioned to use a normal window or kiosk mode.

Likes

Translate

Translate

Report

Report
Nov 19, 2018 1
Participant ,
Nov 19, 2018

Copy link to clipboard

Copied

Normal mode would be best for me. Similar to this link. NIGEL BARKER

Likes

Translate

Translate

Report

Report
Nov 19, 2018 0
Mentor ,
Nov 19, 2018

Copy link to clipboard

Copied

This is another product called Full Screen Slide Show. It is more single-purposed than Art Gallery Magic, but it might offer an easier means to achieve what you want:

PVII Full Screen Slide Show: Thumbs Driven

Likes

Translate

Translate

Report

Report
Nov 19, 2018 0
Participant ,
Nov 19, 2018

Copy link to clipboard

Copied

Thanks everybody. I'll mark this as "correct Answer." If I have other questions, I'll chime back in.

Likes

Translate

Translate

Report

Report
Nov 19, 2018 0
Adobe Community Professional ,
Nov 19, 2018

Copy link to clipboard

Copied

I agree that all the sliders presented are fully functionnal and very cool...

personnaly I really enjoy to use

both comes fully optionnal and not so expensive, the only limitation are then your imagination....

Likes

Translate

Translate

Report

Report
Nov 19, 2018 0
Mentor ,
Nov 19, 2018

Copy link to clipboard

Copied

Just a note, Birnou, and perhaps because I'm a stickler for quality, but both sliders you mention use some pretty rough and outdated script techniques, which clearly result in some fairly choppy animations. In your native language, I believe the word is gauche? And, of course, neither possess visual UIs that install into Dreamweaver or free telephone support. Just trying to put it all on the table...

Likes

Translate

Translate

Report

Report
Nov 19, 2018 0
Adobe Community Professional ,
Nov 19, 2018

Copy link to clipboard

Copied

I understand your quality prerogatives which are to your credit... well these plugins have never caused me any problems, nor to the site of my customers on which they are present.... there has never been a negative feedback from end users. on the contrary, all are admiring and amazed

the two development teams (layer and slider) are very reactive and are constantly listening to users.

as far as I'm concerned, I always buy plug-ins and templates from the envato platform (themeforest or canyon code) because it's a guarantee of security / quality

the online support is really effective there (for example) https://codecanyon.net/item/layerslider-responsive-wordpress-slider-plugin/1362246/support ... it is a commitment to be able to sell from this platform

their reaction time (depending on the time difference) is almost instantaneous....

I have been using their services for several years now, because they provide animations of very beautiful aesthetics, fully customizable, full of possibilities (it is unimaginable everything that can be done)... it is fully responsive and optimized in terms of loading image distribution (retina, mobile, large, tv...) animations support video, interaction, complex animations and 2D/3D effects...

in short, I admit that they are gas factory plugins... and their configuration interface is very intuitive, very complete and WYSIWYG in real time

in short... I don't get tired of it, nor do my customers... but I understand that some people may not enjoy... and please it only cost 12$ !!!

Likes

Translate

Translate

Report

Report
Nov 19, 2018 1
Mentor ,
Nov 19, 2018

Copy link to clipboard

Copied

Um, all I was saying is the animations are rough. It's not an opinion, it simply is. Tool bad you do not promote Dreamweaver plugins - of course, only the good  ones. This used to be a community dedicated to Dreamweaver. Please don't bother responding. There is no need.

Likes

Translate

Translate

Report

Report
Nov 19, 2018 0
Adobe Community Professional ,
Nov 19, 2018

Copy link to clipboard

Copied

Sorry to have hit you, it wasn't my intention.

Likes

Translate

Translate

Report

Report
Nov 19, 2018 0
Mentor ,
Nov 20, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

Sorry to have hit you, it wasn't my intention.

You didn't hit me. You just surprised me with your recommendations. DMX Zone bases a lot of its client-side extensions on open source plugins, but they tend to tweak the scripts with stubs that optimize things. In a way, you can call that quality control.  We write our own scripts, and also employ a high level of quality control to smooth animations and ensure a stable page. There are even decent jQuery plugins, but you've got to really analyze them. The recommendations you made are not very well written and the animations are choppy. This is not a subjective issue. It is simply a measurable facet of those tools. I'm just very surprised that you would recommend something so rough.

Likes

Translate

Translate

Report

Report
Nov 20, 2018 0
LEGEND ,
Nov 20, 2018

Copy link to clipboard

Copied

Too right, l wonder how many extension users even bother to open the js files to see the credits and exactly what they are buying into.

Likes

Translate

Translate

Report

Report
Nov 20, 2018 2
Mentor ,
Nov 20, 2018

Copy link to clipboard

Copied

Too few.

Likes

Translate

Translate

Report

Report
Nov 20, 2018 0