Known Participant

Question

[Locked] Full screen slide using Carousel.

Forum|Forum|7 years ago
November 19, 2018
7 replies
8786 views

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?

Create Slideshows in Dreamweaver

This topic has been closed for replies.

L

Legacys7Author

Known Participant

This thread needs to be monitored. It's sad that this turned into debate and got away from the topic.

O

osgood_

Legend

Legacys7 wrote
This thread needs to be monitored. It's sad that this turned into debate and got away from the topic.

Unfortunately that happens a lot on account a few of us have some 'back history' and can't agree on best workflows so tensions rise and then everything deteriorates rapidly. This is an open forum and as DW doesnt really offer a centric coding workflow everything is open to opinion and debate.

If you dont want any debates or varying opinions/options you need to go to a Bootstrap or other such forum were only those forum contributors use such workflows.............everyones happy or ignorant

pziecina

Legend

osgood_ wrote
If you dont want any debates or varying opinions/options you need to go to a Bootstrap or other such forum were only those forum contributors use such workflows.............everyones happy or ignorant

First my apologies for replying to an off-topic post.

The problem is Os, this is the Dw forum and as far as I can see Dw only supports one workflow, (bootstrap). I have even asked for other workflows to be supported in the comments section of the Dw roadmap, but I will not hold my breath for a positive reply.

To the OP.

We have tried to limit threads being hi-jacked with off-topic posts, but to date experiences say it will not always happen. The main problem is that many of us remember a time before frameworks, when trying to teach a poster to do what they ask for help with, involved posting code, with each of us having different opinions on the best, (no necessarily the easiest) method.

williamj312762442949201

Participating Frequently

Yes, true. At least, unlike your small company, they both have more than your 15 users (who managed to evolve to CS6) and don't seem to need hijacking every single topic here to advertise themselves.

ALsp

Legend

Ah, mister rounded corners. I would rather have a small company that provides for my needs, than a small mind. Just saying... so please do not take offense.

williamj312762442949201

Participating Frequently

Maybe stop hijacking every topic with your ad attempts then and take care of your own users who adore your 1999-like designs.

We don't need anybody telling us not to use masonry grid when we need masonry grid and also we don't need anybody telling us not to use foundation or bootstrap when we want to use them.

If we need your opinion we will ask you.

B i r n o u

Legend

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

personnaly I really enjoy to use

or revolution slider... https://revolution.themepunch.com/ (16$)
or layer slider ... https://layerslider.kreaturamedia.com/ ... (12$)

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

ALsp

Legend

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...

B i r n o u

Legend

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$ !!!

L

Legacys7Author

Known Participant

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

ALsp

Legend

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

L

Legacys7Author

Known Participant

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.

ALsp

Legend

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.

O

osgood_

Legend

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>

<head>

<title>Vue-Swiper</title>

<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>

</div>

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>

L

Legacys7Author

Known Participant

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

Nancy OShea

Community Expert

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.

Nancy O'Shea— Product User & Community Expert

P

Paul-M

Legend

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 - Community Expert