modified: assets/css/style.css

modified: assets/js/componentes/floatingButton.js modified: assets/js/componentes/slides/slideImages.js
faustinopsy · Feb 29, 2024 · f34fda4 · f34fda4
1 parent 195ef14
commit f34fda4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -26,23 +26,24 @@ main {
   position: relative;
   margin: auto;
   border: dotted 1px #00000042;
-  background-color: #bbb;
+  background-color: #bbbbbb2c;
 }
 
 .mySlides {
   display: none;
 }
-
+.mySlides img {
+  width: 100%; 
+  object-fit: contain; 
+}
 .prev, .next {
-  width: 50px; 
-  height: 30px; 
   cursor: pointer;
   position: absolute;
   top: 50%;
   width: auto;
   margin-top: -22px;
   padding: 16px;
-  color: white;
+  color: rgb(0, 0, 0);
   font-weight: bold;
   font-size: 18px;
   transition: 0.6s ease;
@@ -51,14 +52,20 @@ main {
 }
 
 .next {
-  width: 50px; 
-  height: 30px; 
+  width: 50px;
+  height: 58px;
   right: 0;
-  border-radius: 3px 0 0 3px;
+  border-radius: 18px 0 0 18px;
+}
+.prev {
+  width: 50px;
+  height: 58px;
+  left: 0;
+  border-radius: 0 17px 18px 0;
 }
-
 .prev:hover, .next:hover {
   background-color: rgba(0,0,0,0.8);
+  color: rgb(255, 255, 255);
 }
 
 .text {

diff --git a/assets/js/componentes/floatingButton.js b/assets/js/componentes/floatingButton.js
@@ -3,10 +3,8 @@ class FloatingButton {
         this.i18nService = i18nService;
         this.navegar = navegar;
         this.buttonElement = document.createElement('button');
-        //this.buttonElement.textContent = this.i18nService.t('open');
         this.buttonElement.classList.add('floating-button');
     }
-
     render() {
         document.body.appendChild(this.buttonElement);
         this.buttonElement.addEventListener('click', () => this.navegar('#config'));

diff --git a/assets/js/componentes/slides/slideImages.js b/assets/js/componentes/slides/slideImages.js
@@ -9,7 +9,7 @@ class SlideImages {
         const slides = this.images.map((image, index) => `
             <div class="mySlides fade ">
                 <div class="numbertext">${index + 1} / ${this.images.length}</div>
-                <img src="${image}" style="width:100%;" alt="Painel de slides">
+                <img src="${image}"  alt="Painel de slides">
             </div>
         `).join('');
         const controls = this.slideControls.render();