Display a customized slideshow within a designated div container with specific dimensions

My div contains a slideshow of images, but only parts of the images are appearing. I tried adjusting the width and height of the images, but the issue persists. Here is a snippet of my code:

<link href="./CSS/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="./js/js-image-slider.js" type="text/javascript"></script>
<div id="slider" width=100px height=100px>
            <img src="./images/Health Care 2.jpg" alt="Health" width: 100px; 
    height: 100px; />
            <img src="./images/war.jpg" alt="War"  width: 100px; 
    height: 100px;/>
            <img src="./images/food.jpg" alt="Food" width: 100px; 
    height: 100px; />
            <img src="./images/education-it-hardware-579.jpg" alt="Education" width: 100px; 
    height: 100px;/>
            <img src="./images/sport.jpg" alt="Sport" width: 100px; 
    height: 100px; />
            <img src="/images/technology.jpg" alt="Technology" width: 100px; 
    height: 100px;/>
        </div>

This is the CSS associated with it:

/* http://www.menucool.com */
css content goes here

Answer №1

Your code formatting needs some adjustments. You can use either:

width="100px" height="100px"

or

style="width:100px; height:100px;"

Answer №2

At first, it is necessary to eliminate both the width and height attributes as the "menucool" scripts are intelligent enough to standardize images. The CSS provided indicates that you should make the slider the same size as your images.

The JavaScript code relies on the width and height of the images for all animation calculations, so using 100px * 100px images without manual CSS adjustments and updating the #slider CSS is recommended.

#slider {
     width: 100px; 
    height: 100px;/* Make it the same size as your images */
    background:#fff url(loading.gif) no-repeat 50% 50%;
    position:relative;
    margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}

This is the original HTML code you utilized:

<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">
<img src="jsImgSlider/images/image-slider-1.jpg" alt="Welcome to Menucool Image Slider" />
<img src="jsImgSlider/images/image-slider-2.jpg" alt="" />
<img src="jsImgSlider/images/image-slider-4.jpg" alt="Pure Javascript. No jQuery. No flash." />
<img src="jsImgSlider/images/image-slider-5.jpg" alt="#htmlcaption" />
 </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that there is no overlapping of margins when setting the explicit height of the outer

I am curious about the reason behind this phenomenon. The inner div has a margin-bottom of 16px. From what I understand, when the outer div is in contact with the inner div without any padding or border, and the outer div does not have a set height in it ...

NodeJs for Updating Data: An Essential Guide

When attempting to update user data in my database using a Node.js app with ExpressJS, I encountered the following error in the terminal: sqlMessage: "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version fo ...

Issues with missing data in Selenium Python

Hi there! I'm attempting to scrape data from this webpage in order to retrieve all the values displayed on the table. So far, I've been using selenium for this task, but it seems to only fetch the first 6 values while the rest remain hidden someh ...

CSS animations are not running as expected

Currently, I've been experimenting with a basic CSS animation. The objective is to make the application logo move 200px to the right and then smoothly return to its original position. Below is the code snippet I've used for these animations: /* ...

I'm trying to figure out the best way to successfully pass a prop to another component in TypeScript without running into the frustrating issue of not being able to

I have been facing an issue while trying to pass a prop from a custom object I have defined. The structure of the object is as follows: export type CustomObjectType = { data?: DataObject }; export type DataObject = { id: number; name: stri ...

Converting a file buffer to upload to Google Cloud Storage

I have been facing an issue while attempting to upload a file to Google Cloud using a buffer and the save function. The problem I am encountering is that even though the files are uploaded to Google Cloud, they are not in the correct format. When I try to ...

Getting the full referrer URL can be achieved by using various methods depending

I am currently working with ASP.Net. My goal is to retrieve the complete referrer URL when visitors arrive at my website from: https://www.google.co.il/webhp?sourceid=chrome-instant&rlz=1C1CHEU_iwIL457IL457&ion=1&espv=2&ie=UTF-8#q=%D7%90 ...

Building modals with Bootstrap

Currently, my website is built using Bootstrap, JQuery, HTML, and CSS. I am looking to enhance the user experience by incorporating a modal output feature. The idea is that when a user clicks on a specific hyperlink, a modal window will open displaying t ...

Tips for saving/downloading generated QR codes in React Native

Using this code allows me to generate QR Codes, but I am struggling with saving the generated QR Code in PNG or JPEG format. I have tried a few examples without success and I am continuing to try different methods. import React, { Component } from 'r ...

Endless loop caused by Angular UI-router's promise resolving

I'm attempting to retrieve data from my SQLite database before loading a view using resolve when defining the state in ui-router. Currently, this is how I've set up the state: .state("menu", { templateUrl: "templates/menu.html", control ...

Encountered an issue with trying to access the 'map' property of an undefined value while using Express and VueJS

Currently, I am in the process of developing a fullstack application utilizing Express, VueJS, and Mongoose. The app functions as a news feed platform. A couple of days ago, I encountered an error which was resolved with the help of your guidance. However, ...

Using Regular Expression to verify the presence of numbers and spaces

Currently, I have implemented a regular expression that ensures my string contains 5 digits. While this regex works flawlessly, I now also require it to allow white spaces: both "123 45" and "12345" should meet the criteria. string.match(/^\d{5}$/g); ...

Problems that seem to loop endlessly

I was working on some algorithm challenges from a coding platform, and I hit a roadblock with the "The Final Countdown" challenge. Here's what the challenge required: Provide 4 parameters (param1, param2, param3, param4), print the multiples of para ...

What is the most efficient method for storing values from multiple radioGroups in the state of a controlled component?

Just starting out with React, looking to build a multi-step form with a step counter in the State and Switch statement for component display. Following a tutorial on YouTube. Currently storing user input values in the state via props. The form includes a ...

Vue component always renders a new line

Whenever I include a <component> tag in my main application, it always renders on a new line. Is there a way to make it inline? I am trying to achieve something like this: <p>This is a component :<component></component></p> & ...

In reference to carrying out functions post partial page reload

For the web page I'm working on, I have set it up so that upon reloading, an ajax call is made to the server to retrieve and display data. Within my code, I have included: $(document).ready( function(){.... some work.... }); Now, I also have a refre ...

Using Regular Expressions in JavaScript for Email Validation with Remote Procedure Calls

I'm working on some JavaScript codes and I need to add email validation to prevent users from submitting a form with an invalid email address. I'm still new to this technology, so please be patient with me. Thank you for your understanding :) var ...

Can you explain the extent to which JavaScript's setTimeout() and clearTimeout() apply?

Approximately 30 seconds after a page is loaded or reloaded, a pop-up will be displayed under certain conditions. The following code successfully achieves this functionality: jQuery(document).ready(function($) { .......... if (localStorage.getItem ...

Implementing json value extraction in javascript

Hello there! I'm currently having trouble constructing a JSON format. Here is the JSON response: { "txs": { "lock_time": 0, "ver": 1, "size": 372, "inputs": [ { &qu ...

The UL list-style does not seem to be working properly on the Woocommerce checkout page

After creating my e-commerce website and implementing the woocommerce plugin to display products, I encountered an issue. The main menu pages are all showing up with the list-style, but the pages associated with the plugins are not displaying the list-styl ...